css3英文文字换行，超过两行...展示

06便士

已于 2023-08-28 11:21:36 修改

阅读量1.8k

点赞数 1

文章标签： css3 html 前端

于 2023-08-28 11:05:10 首次发布

本文链接：https://blog.csdn.net/Giraffe0615/article/details/132534257

版权

文章讲述了在开发过程中遇到的div内容中文换行而英文不换行的问题，通过CSS属性如word-break:break-all和text-overflow:ellipsis以及white-space:pre-line等解决，展示了如何控制英文单词和汉字的显示长度以适应设计需求。

摘要由CSDN通过智能技术生成

需求：超过两行...展示

开发的过程中发现div内容中文可以换行英文不换行，导致长度会溢出。

是英文全英文的话浏览器会解析成一个单词，

加上这句就好了

word-break:break-all;

一开始不知道是会解析成一个单词，用字符串拼接处理了，

        // 处理名称过长...显示
        if(item.name.length > 24){
          item.name = item.name.slice(0,24)+'...'
        }

但是英文、数字占位比汉字要短，存在这种情况

后来发现用css可以解决，

.practice-everyday{
    font-size: 36rpx;
    font-weight: bold;
    word-break:break-all;
<!-- 弹性伸缩盒子模型显示 -->
    display: -webkit-box;
    overflow: hidden;
<!-- ...展示 -->
    text-overflow: ellipsis;
<!-- 设置或检索伸缩盒对象的子元素的排列方式 -->
    -webkit-box-orient: vertical;
<!-- 限制在一个块元素显示的文本的行数 -->
    -webkit-line-clamp: 2;
    white-space: pre-line;
}