手机网页里，一段文本超出显示省略号(…)，这个CSS怎么设置

Posted 2023-05-05

参考技术A text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)
在WebKit浏览器或移动端，用-webkit-line-clamp用来限制在一个块元素显示的文本的行数
两者结合就能得到你要的效果。

例子：
<p style="
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
">响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局
</p>本回答被提问者采纳

uni-app 文本超出部分省略号显示

最近项目中用到了这个小特性，文本超出部分用省略号显示，特此记录便于日后查阅。

.content {
   width: 100rpx !important;
   overflow: hidden;
   word-break: break-all;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   white-space: nowrap;
}

width设置设计图上的固定宽度就可以了。