css实现多行文本溢出显示省略号

柔情只为你懂 2021-09-18 07:54 410阅读 0赞

**上代码**：

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <style>
    	*{margin:0;padding:0;}
    	.textOverflow{
    		margin: 20px auto;
    		width: 200px;
    		border: 1px solid red;
    		word-break: break-all;		   /** word-break 属性规定自动换行的处理方法，允许在单词内换行 **/
    		text-overflow: ellipsis;       /** 文字超出显示省略号 **/
    		display: -webkit-box;          /** 对象作为伸缩盒子模型显示 **/
    		-webkit-box-orient: vertical;  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    		-webkit-line-clamp: 2;         /** 显示的行数 **/
    		overflow: hidden;              /** 隐藏超出的内容 **/
        }   
      </style>
     </head>
     <body>
      <div class="textOverflow">
    	word-break 属性规定自动换行的处理方法，允许在单词内换行
      </div>
     </body>
    </html>

**效果：**  
![在这里插入图片描述][20190226151447914.png]

**概括：**  
word-break 属性规定自动换行的处理方法

1.  normal 使用浏览器默认的换行规则
2.  break-all 允许在单词内换行
3.  keep-all 只能在半角空格或连字符处换行

box-orient：horizontal | vertical | inline-axis | block-axis

*  horizontal： 设置弹性盒对象的子元素从左到右水平排列
 *  vertical： 设置弹性盒对象的子元素从上到下纵向排列
 *  inline-axis： 设置弹性盒对象的子元素沿行轴排列
 *  block-axis： 设置弹性盒对象的子元素沿块轴排列

\-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中

\-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
 *  \-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

[20190226151447914.png]: /images/20210812/1d7d41c52ecb416b83d5d8e6fb714476.png