CSS高级技巧⑥——文字溢出省略号显示

文章目录[隐藏]

• 单行文字溢出省略号显示
  • 将文字一行显示
  • 多余部分隐藏
  • 超出部分省略
• 多行文字溢出省略号显示(兼容不好)

• white-space属性用于控制元素内部空白字符的处理方式

1. white-space: normal;如果文字显示不开自动换行(默认)

   div {
               width: 100px;
               background-color: #43ff3d;
               /* 如果文字显示不开自动换行(默认) */
               white-space: normal;
   }

   

2. white-space: nowrap;如果文字显示不开则强制一行

   div {
               width: 100px;
               background-color: #43ff3d;
               /* 如果文字显示不开则强制一行 */
               white-space: nowrap;
           }

   

多余部分隐藏

使用overflow: hidden;可以把多余部分隐藏。

<style>
        div {
            width: 100px;
            background-color: #43ff3d;
            /* 如果文字显示不开则强制一行 */
            white-space: nowrap;
            /* 溢出部分隐藏 */
            overflow: hidden;
        }
    </style>

超出部分省略

使用text-overflow: ellipsis;可以把多余部分转为省略号。

div {
            width: 100px;
            background-color: #43ff3d;
            /* 如果文字显示不开则强制一行 */
            white-space: nowrap;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 利用省略号代替超出部分 */
            text-overflow: ellipsis;
        }

多行文字溢出省略号显示(兼容不好)

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)

div {
            width: 100px;
            background-color: #43ff3d;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 利用省略号代替超出部分 */
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制一个块元素显示文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素排列方式 */
            -webkit-box-orient: vertical;
        }