文字换行

         强制换行:纯数字或者纯字母时,该字符被认为是一个字符,因此不会自动换行,如果父容器的宽度不够,便会超出父容器的限制。
           解决方案: 设置自动换行

                          a、 word-break   规定非中日韩文字的换行规则
                                
                            word-break: normal  只在允许的断字点换行(浏览器保持默认处理)。
                            word-break: break-all / break-word 允许在长字符内换行
                            word-break: keep-all 只能在半角空格或连字符处换行 
  
                          兼容性 : 各大主流浏览器都兼容   

                            a、 word-wrap  属性规定自动换行的处理方法 
                                              
                        word-wrap: normal  只在允许的断字点换行(浏览器保持默认处理)。
                         word-wrap break-word   允许在长字符内换行
 
                          兼容性 : 各大主流浏览器都兼容    

         强制不换行: 文本不是很长的字符串时,在到边界值时中日韩文字会自动换行,只需要一行显示时可以让其强制不换行。
         
         解决方案:设置 white-space:nowrap
         
                           white-space属性是处理

文本溢出

          文本溢出处理属性为  text-overflow

          text-overflow:clip   只是在边界值截断文本隐藏
          text-overflow:ellipsis  超出边界的文本用“...”代替

            单行显示溢出部分用“...”代替,如果文本的容器是行级元素,如span 、i 等需要将其设置为块级元素,再设置容器宽度、强制文本不换行、容器隐藏属性
         
            
     span{
           display: block;
           width: 100%;
           white-space: nowrap;  /* 强制不换行 */
           overflow: hidden;
           text-overflow: ellipsis;
         }
         
         如果需要两个span同时溢出时“...”,并且显示在同一行不妨设置 display:inline-block; width:49%;      

文本对齐

          水平对齐:水平对齐主要说一下 justify

                        text-align:justify;     如果文本内容一行显示不下,该对齐方式可以是文本内容与父容器两端边界对齐;

                        使用:在中韩日文字文本可以处理段落层次不齐的问题
                        弊端:非中日韩文字,文字过长会到各种无法预料的呈现方式。
                        原因:在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐