前端踩坑之旅

东辉在线 2019-11-05

文本溢出处理

1. 单行文本溢出显示省略号

overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)
white-space: nowrap; (设置文字在一行显示不能换行)
text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)

2. 多行文本溢出显示省略号

  1. 方法一(css)

    -webkit-line-clamp:2; (用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果,它需要组合其他的WebKit属性)
    
    display: -webkit-box; (和1结合使用,将对象作为弹性伸缩盒子模型显示 )
    
    -webkit-box-orient:vertical;( 和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
    
    overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)
    
    text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)
  2. 方法二(js)

    数据获取时:预估字符,过长后截取字符串并手动加上“...”
      slice()、substring()、substr()都有截取字符串的作用
      
      
      (1)str.substring(indexStart, [indexEnd])
      
       注:substring()从提取的字符indexStart可达但不包括 indexEnd
         如果indexStart 等于indexEnd,substring()返回一个空字符串。
         如果indexEnd省略,则将substring()字符提取到字符串的末尾。
         如果任一参数小于0或是NaN,它被视为为0。
         如果任何一个参数都大于stringName.length,则被视为是stringName.length。
         如果indexStart大于indexEnd,那么效果substring()就好像这两个论点被交换了一样; 例如
         str.substring(1, 0) == str.substring(0, 1)
         
         
      (2)str.substr(start, [length])
      
       注:substr()会从start获取长度为length字符(如果截取到字符串的末尾,则会停止截取)。
         如果start是正的并且大于或等于字符串的长度,则substr()返回一个空字符串。
         若start为负数,则将该值加上字符串长度后再进行计算(如果加上字符串的长度后还是负数,则从0开截取)。
         如果length为0或为负数,substr()返回一个空字符串。如果length省略,则将substr()字符提取到字符串的末尾。
         
        (3)str.slice(beginIndex[, endIndex])
        
         注:若beginIndex为负数,则将该值加上字符串长度后再进行计算(如果加上字符串的长度后还是负数,则从0开始截取)。
            如果beginIndex大于或等于字符串的长度,则slice()返回一个空字符串。
            如果endIndex省略,则将slice()字符提取到字符串的末尾。如果为负,它被视为strLength + endIndex其中strLength是字符串的长度。

坑点

  1. 设置display: -webkit-box;后文本属性部分失效 例如: text-align: center
    webkit-box属性
    -webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis |
    inherit,其中默认值是inline-axis,即横向排列
    -webkit-box-flex 子元素之间比例,仅作一个系数
    -webkit-box-direction 子元素排列顺序 normal | reverse | inherit,其中默认值是normal
    -webkit-box-flex-group 以组为单位的流体系数
    -webkit-box-ordinal-group 以组为单位的子元素排列方向
    -webkit-box-lines 子元素是否换行,类似word-wrap和word-break的作用
    -webkit-box-align 子元素垂直方向的对其方式
    -webkit-box-pack 子元素水平方向的对其方式

相关推荐