内容超出DIV宽度后显示省略号并单行或多行显示

2022-03-02 579 阅读1分钟

内容超出DIV宽度后显示省略号并单行显示

  <style> 
p{ width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;} 
</style> 
<body> <p>内容超出DIV宽度后显示省略号并单行显示内容超出DIV宽度后显示省略号并单行显示内容超出DIV宽度后显示省略号并单行显示内容超出DIV宽度后显示省略号并单行显示内容超出DIV宽度后显示省略号并单行显示 </p> </body>

内容超出DIV宽度后显示省略号并多行显示

  <style> 
p{ width: 200px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;} 
</style> 
<body> <p> 内容超出DIV宽度后显示省略号并多行显示内容超出DIV宽度后显示省略号并多行显示内容超出DIV宽度后显示省略号并多行显示内容超出DIV宽度后显示省略号并多行显示内容超出DIV宽度后显示省略号并多行显示</p> </body>

word-break:break-all;// 允许单词内自动换行，如果一个单词很长的话
text-overflow: ellipsis;// 溢出用省略号显示
overflow:hidden;// 超出的文本隐藏
display:-webkit-box; // 作为弹性伸缩盒子模型显示
-webkit-line-clamp:2;// 显示的行
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列