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

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

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

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

加上这句就好了

css 复制代码
word-break:break-all;

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

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

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

后来发现用css可以解决,

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;
}
相关推荐
秋天的一阵风几秒前
🔍JavaScript严格模式:你真的了解它的重要性吗?
前端·javascript·全栈
互联网搬砖老肖22 分钟前
Web 架构之微服务拆分原则与反模式
前端·微服务·架构
顽强d石头27 分钟前
【uniapp】小程序中input输入框的placeholder-class不生效
前端·小程序·uni-app
杨了个杨898230 分钟前
在MobaXterm 打开图形工具firefox
前端·firefox·腾讯云
URBBRGROUN46730 分钟前
邮件限流器
java·前端·数据库
闲蛋小超人笑嘻嘻1 小时前
前端面试六之axios
前端
万少1 小时前
我们又来啦 又又上架了一个鸿蒙项目-萤火故事屋
前端·harmonyos·客户端
江城开朗的豌豆1 小时前
HTML5 datalist:让你的输入框拥有'读心术'的超能力!
前端·javascript·面试
江城开朗的豌豆1 小时前
事件绑定三件套:从onclick到addEventListener的进化史
前端·javascript·面试
小满zs4 小时前
Zustand 第四章(中间件)
前端·react.js