md/css/文本相关.md

文本相关css 处理

文本溢出

1. 单行文本

   1. 溢出隐藏
      1. overflow简单隐藏 css代码: overflow:hidden;

   2. 溢出隐藏显示省略号

      1. 使用 text-overflow css代码

         
             white-space:nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         

2. 多行文本溢出

    ```style
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
    ```
   

3. 相关知识点

   1. 文本盒子需要设置宽度来限制文本可以存在的位置

   2. 在flex布局中自动撑开内容的盒子进行文本溢出处理 可以给元素的 width 设置为0来实现

      文本对齐-等宽对齐

4. 在一个div中自动换行的大块文字,因为换行导致文字总体偏左,会保留大量的空白区域,看起来没那么美观 解决方法 给元素设置熟悉text-align:justify来进行解决

   div{
   text-align:justify;
   }
   

   一行内等宽对齐

   div{
   text-align:justify;
   text-align-last: justify;
   }
   

   text-indent:2em;