文字相关

文字换行

  1. word-wrap:break-word; 
  2. word-break:break-all;
  3. overflow: hidden;/*这个参数根据需要来绝对要不要*/

超出隐藏

单行文字 

  1. p{
  2. width:100px;
  3. overflow:hidden;
  4. white-space:no-wrap;
  5. text-overfow:ellipsis;
  6. }

多行文字

  1. p{
  2. width:100px;
  3. overflow: hidden;
  4. display: -webkit-box;
  5. -webkit-box-orient: vertical;
  6. -webkit-line-clamp: 2;
  7. }
  9.   .text {
  10.     width: 100px;
  11.     word-wrap:break-word;         /* 内容存在英语或数字时强制换行 */
  12.     overflow: hidden;             /* 隐藏溢出部分 */
  13.     text-overflow: ellipsis;      /* 显示省略符号来代表被隐藏的文本 */
  14.     display: -webkit-box;         /* 将对象作为弹性伸缩盒子模型显示 */
  15.     -webkit-box-orient: vertical; /* 设置盒子内排列顺序为纵向 */
  16.     -webkit-line-clamp: 2;        /* 限制块元素显示的文本的行数 */
  17.   }
  23. 拓展内容
  25. 适用范围 ： 因为使用了Webkit的css拓展属性，该方法适用于Webkit浏览器以及移动端
  26.     注： 1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数
  27.             为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  28.       2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
  29.       3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

需要注意的是：
将height 设置为 line-height 的整数倍，防止超出的文字露出。

可参考文档 ：https://juejin.im/post/5acccdab5188255cb07d7386

文字竖排

1.transform:rotate()

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>test</title>
  5.     <meta charset="UTF-8">
  6. </head>
  7. <style>
  8. .one {
  9.     margin: 150px auto;
  10.     width: 200px;
  11.     font-size: 20px; 
  12.     line-height: 24px;
  13.     transform:rotate(90deg);
  14.     -ms-transform:rotate(90deg);     /* IE 9 */
  15.     -moz-transform:rotate(90deg);     /* Firefox */
  16.     -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
  17.     -o-transform:rotate(90deg);     /* Opera */
  18. }
  19. </style>
  20. <body>
  21.     <div class="one">欲话毗陵君反袂</div>
  22.     <div class="one">ENGLISH</div>
  23. </body>
  24. </html>

2.break-word

  1. word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
  2. word-break:break-all;

3.writing-mode

  1. writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl
  • vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
  • vertical-lr：垂直方向内内容从上到下，水平方向从左到右
  • lr-tb：从左向右，从上往下；
  • tb-rl：从上往下，从右向左。

去除button默认样式

  1. border: 1px solid transparent;
  2. outline: 0;

去除原生 textarea 右下角样式

  1. textarea{
  2. resize:none
  3. }
  4. 去边框border:none

css实现常用图形

https://www.zhangxinxu.com/wordpress/2019/01/pure-css-shapes/

三角形

  1. 向上三角形
  3. <div class="div"></div>
  5. .div{
  6.     width: 0;
  7.     border-left: 50px solid transparent;
  8.     border-right: 50px solid transparent;
  9.     border-bottom: 100px solid red;
  10. }
  13. 向下三角形
  15. .div{
  16.     width: 0;
  17.     border-left: 50px solid transparent;
  18.     border-right: 50px solid transparent;
  19.     border-top: 100px solid red;
  20. }
  22. 方向朝左
  23. .div {
  24.     width: 0;
  25.     border-top: 50px solid transparent;
  26.     border-right: 100px solid red;
  27.     border-bottom: 50px solid transparent;
  28. }
  30. 方向朝右
  31. .div {
  32.       width: 0;
  33.       border-top: 50px solid transparent;
  34.       border-left: 100px solid red;
  35.       border-bottom: 50px solid transparent;
  36.   }

三角形实现原理

带尖角的说话泡泡

按钮

设置条件：
字体颜色
外边框颜色
长度宽度固定

需要注意：
内容文字长度不固定
文字一般都是居中状态

  1. <div class="btn">
  2.     工具齐全
  3. </div>
  6. <view class="btn">
  7.     工具齐全
  8. </view>
  1.  .btn{
  2.     width: 100px;
  3.     height: 50px;
  4.     border: 1px solid black;
  5.     font-size: 18px;
  6.     color: #333;
  7.     display: flex;
  8.     justify-content: center;
  9.     align-items: center;
  10. }
  13.  .btn{
  14.     width: 100rpx;
  15.     height: 50rpx;
  16.     border: 1rpx solid black;
  17.     font-size: 18rpx;
  18.     color: #333;
  19.     display: flex;
  20.     justify-content: center;
  21.     align-items: center;
  22. }

标签

设置条件：
字体颜色
外边框颜色
padding 边距

需要注意：
内容文字长度不固定
需要使用行内块元素 ，在不设置宽度的情况下，border会默认浏览器宽度。

  1. <div class="tag">
  2.     工具齐全
  3. </div>
  6. <view class="tag">
  7.     工具齐全
  8. </view>
  1. .tag{
  2.   padding:10px;
  3.   color:#999;
  4.   font-size:26px;
  5.   border:1px solid black;
  6.   display:inline-block;
  7. }
  9. .tag{
  10.   padding:10rpx;
  11.   color:#999;
  12.   font-size:26rpx;
  13.   border:1rpx solid black;
  14.   display:inline-block;
  15. }

加载更多的样式

示例
常见样式 - 图1

需求：根据不同的屏幕适应，实际上线条的长度长度不是固定的，是自适应的

布局模板

  1. <div class="title">
  2.   <div class="line"></div>
  3.   <div class="text">优惠信息</div>
  4.   <div class="line"></div>
  5. </div>
  7. .title{
  8.     display: flex;
  9.     width: 80%;
  10.     margin: 28px auto 24px auto;
  11. }
  12. .line{
  13.     flex:1;
  14.     position: relative;
  15.     top: -6px;
  16.     border-bottom: 1px solid #ccc;
  17. }
  18. .text{
  19.     padding: 0 12px;
  20.     font-size: 14px;
  21.     font-weight: 700;
  22. }

中间文字，两边横线

https://blog.csdn.net/qq_36671474/article/details/77371588

使用伪类

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>CSS伪类实现中间文字两边横线效果</title>
  7.     <style>
  8.         .wrap {
  9.             position: absolute;
  10.             text-align: center;
  11.             width: 100%;
  12.         }
  13.         .wrap div {
  14.             line-height: 20px;
  15.         }
  16.         /*CSS伪类用法*/
  17.         .wrap div:after, .wrap div:before {
  18.             position: absolute;
  19.             top: 50%;
  20.             background: #ddd;
  21.             content: "";
  22.             height: 1px;
  23.             width: 45%;
  24.         }
  25.         /*调整背景横线的左右距离*/
  26.         .wrap div:before {
  27.             left: 0;
  28.         }
  29.         .wrap div:after {
  30.             right: 0;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <div class="wrap">
  36.     <div>暂无数据</div>
  37. </div>
  38. </body>
  39. </html>

Tooltip 文字提示

跟随三角形

image.png

  1. 伪元素
    2.绝对定位

页面占满

  1. position: absolute;
  2. top: 0;
  3. bottom: 0;
  4. left: 0;
  5. width: 100%;

navMenu

右侧下拉按钮 跟随鼠标hover,进行展示

按钮实现 ： 字体图标/图片
按钮变化 ： 翻转

  1. transform : rotate(180deg)

常见样式 - 图3

遮罩层

  1. .mask {
  2.     position: absolute; //或者 fixed
  3.     width: 100%;
  4.     height: 100%;
  5.     top: 0;
  6.     left: 0;
  7.     background:rgba(0,0,0,0.6) //使用rgba 而不是 opacity
  8. }

::after伪类

实现下划线，右侧线等效果

  1. .article-box {
  2.   padding-top: 15px;
  3.   padding-bottom: 15px;
  4.   position: relative;
  5. }
  6. .article-box:after {
  7.   content: " ";
  8.   position: absolute;
  9.   height: 5px;
  10.   right: 0;
  11.   bottom: 0;
  12.   left:0;
  13.   background-color: #E9E9E9;
  14.   border: 1rpx solid lightgray;
  15. }