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;
}
相关推荐
全宝4 分钟前
🔢前端解决浮点数运算精度丢失的问题
前端·javascript
江城开朗的豌豆10 分钟前
JavaScript篇:偷懒也有理!事件代理让我少写一半代码
前端·javascript·面试
云浪25 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨32 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗33 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码35 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜37 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军42 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆1 小时前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试