文本超过宽度显示省略号
Posted 进击的前端狗
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文本超过宽度显示省略号相关的知识,希望对你有一定的参考价值。
文本超过宽度,以省略号显示有2种,
第一种单行不换行
<style> .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } </style>
第二种2行或者2行以上的文本要在结尾省略号超出部分
width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
以上是关于文本超过宽度显示省略号的主要内容,如果未能解决你的问题,请参考以下文章
Vue3中文本只显示三行,超过部分在文字后显示省略号和展开按键