一、换行

white-space空格处理 一般用来处理是否换行

可选值：normal,nowrap,pre,pre-wrap,pre-line

white-space:normal合并空格自动换行

normal表示合并空格，多个相邻空格合并成一个空格，在源码中的换行作为空格处理，只会根据容器的大小进行自动换行。

white-space:nowrap合并空格不换行

white-space:nowrap和normal一样，也合并空格，但是不会根据容器大小换行，表示不换行。经常配合overflow,text-overflow一起使用
overflow:hidden; 溢出裁剪，显示
overflow:visible; 溢出不裁剪，不显示

white-space:pre保留空格不换行

white-space:pre的作用是保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和
标签。

white-space:pre-wrap保留空格换行

white-space:pre-wrap的作用是保留空格，并且除了碰到源码中的换行和
会换行外，还会自适应容器的边界进行换行。

white-space:pre-line合并空格换行

white-space:pre-line的作用是合并空格，换行和white-space:pre-wrap一样，遇到源码中的换行和
会换行，碰到容器的边界也会换行。
white-space:pre-line会保留源码中的换行，但是不会保留源码中的空格。

white-space兼容性

这些css属性同样可以用到textarea元素中，当然要去除
标签的作用，textarea会把它原样显示的。

二、css 文本两行显示，超出省略号表示

  1.  //一行
  2.   white-space: nowrap;
  3.   text-overflow: ellipsis;
  4.   overflow: hidden;
  5.   word-break: break-all;
  6. //两行
  7.   text-overflow: -o-ellipsis-lastline;
  8.   overflow: hidden;
  9.   text-overflow: ellipsis;
  10.   display: -webkit-box;
  11.   -webkit-line-clamp: 2;
  12.   line-clamp: 2;
  13.   -webkit-box-orient: vertical;

三、canvas遮挡页面元素，导致元素点击失效

pointer-events: none; 给canvas加这个css属性。
设置背景与屏幕高度一致


四、判断字符长度，是否显示title

  1. <div class="prj_name" :title="GetLength(prj.projectName) > 18 ? prj.projectName : ''" >
  2.   {{ prj.projectName }}
  3. </div>
  4. //计算长度
  5.     GetLength(val) {
  6.       return val.replace(/[\u0391-\uFFE5]/g, "aa").length; //先把中文替换成两个字节的英文，在计算长度
  7.     },

五、设置垂直居中

  1.             position: absolute;
  2.             top: 50%;
  3.             transform: translateY(-50%);

六、文字居中，为换行或换行都居中显示

image.pngimage.png
高度必须设置
使用两层flex布局

  1. <div span="14" class="title">
  2.         <span :title="lookPageName">{{ lookPageName }}</span>
  3. </div>
  5. .title{
  6.         font-size: 16px;
  7.         font-weight: 700;
  8.         min-height: 50px; //高度需要设置
  9.     display: flex; 
  10. word-break: break-all;
  11.         span{
  12.             display: flex;
  13.             justify-content: center;//水平
  14.             align-items:center;//垂直
  15.         }
  16. 或
  17. span{
  18.             margin:auto
  19.         }
  20. }

七、多种居中方式

万能居中：

  1. display: flex;
  2. justify-content: center;
  3. align-items: center;

其他文本居中方法：

  1. 单行文本居中：（水平垂直居中用：text-align/line-height）
  2.     text-align：文本对齐属性。设定文本对齐方式。
  3. 语法：
  4.   text-align：left/right/center/justify （两端对齐）
  5.   line-height：行高属性。设定行距。
  6.   值为数值或倍数。文字一定会出现行高的（值）最中间
  8. vertical-align：垂直对齐方式
  9. 语法：
  10.     vertical-align:top/bottom/middle;
  12. /*垂直对齐 在特殊情况下有效果，当前无 */
  13.   /* vertical-align: top; 顶对齐*/
  14.   /* vertical-align: bottom; 底对齐 */
  15.   /* vertical-align: middle; 居中 */
  17.   line-height: 2;字体大小两倍
  18.   line-height: 1;/*取消默认行高*/

八、设置height:100vh，该元素会被撑开与屏幕高度一致