移动端设备显示限制,隐藏部分内容

  困惑:移动端的开发,往往没有想象中的那么容易。不仅要考虑适配,还有不同场景的交互。开发手机版时,手机屏幕毕竟有限,文字过多时,往往采用一个折中的方法,将超出盒子width的部分用…代替。

通过CSS判断,这个区域宽度

省略

1
2
3
4
5
<!-- 单行文本溢出 -->
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

一行省略

1
2
3
4
5
6
7
8
<!-- 多行文本溢出 -->
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 省略
  2. 2. 一行省略
,