手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2021年09月13日的文章

咦,被white-space: nowrap;小坑了一把

 小程序文本限制行数其实是比较简单的,只要指定最大高度,然后overflow隐藏一下,但由于我之前为了去空格,加了个white-space:nowwrap,导致换行一直失败,也就是说怎么着都在一行里面,去掉就好了

小程序文字限定行数换行就这几行:

CSS代码
  1. .break{  
  2.     overflowhidden;  
  3.     word-break: break-all;  
  4.     text-overflow: ellipsis; //...显示  
  5.     display: -webkit-box;  //盒型
  6.     -webkit-box-orient: vertical;  
  7.     -webkit-line-clamp: 2;  //2行,这个最好配合一下元素的max-height和font-size,多试两下就OK了。
  8. }  

轻松搞定。

参考:

1、https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space,white-space CSS 属性是用来设置如何处理元素中的 空白