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

9月前作者：软软不吃肉分类：Toy博客阅读(53) 违法举报

这篇具有很好参考价值的文章主要介绍了css3英文文字换行，超过两行...展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

加上这句就好了

word-break:break-all;

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

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

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

css3英文文字换行，超过两行...展示,css3,html,前端

后来发现用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;
}

css3英文文字换行，超过两行...展示,css3,html,前端文章来源地址https://www.toymoban.com/news/detail-686233.html

到了这里，关于css3英文文字换行，超过两行...展示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

前端 | （十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新

学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频系列笔记：【HTML4】（一）前端简介【HTML4】（二）各种各样的常用标签【HTML4】（三）表单及HTML4收尾【CSS2】（四）CSS基础及CSS选择器【CSS2】（五）CSS三大特性及常用属性【CSS2】（六）CSS盒子模型

2024年02月16日
浏览(47)
HTML5+CSS3+移动web 前端开发入门笔记（二）HTML标签详解

排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍：标题使用至标签进行定义。定义最大的标题，定义最小的标题。具有align属性，属性值可以是：left、center、right。将给定的HTML代码转换为Markdown格式的标题标签如下所示：效果演示： H3：

2024年02月07日
浏览(65)
前端 | （十三）CSS3简介及基本语法（下）| 伸缩盒模型 | 尚硅谷前端html+css零基础教程2023最新

学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频系列笔记：【HTML4】（一）前端简介【HTML4】（二）各种各样的常用标签【HTML4】（三）表单及HTML4收尾【CSS2】（四）CSS基础及CSS选择器【CSS2】（五）CSS三大特性及常用属性【CSS2】（六）CSS盒子模型

2024年02月16日
浏览(61)
前端 | （十二）CSS3简介及基本语法（中）| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新

学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频系列笔记：【HTML4】（一）前端简介【HTML4】（二）各种各样的常用标签【HTML4】（三）表单及HTML4收尾【CSS2】（四）CSS基础及CSS选择器【CSS2】（五）CSS三大特性及常用属性【CSS2】（六）CSS盒子模型

2024年02月16日
浏览(47)
[HTML]Web前端开发技术7（HTML5、CSS3、JavaScript ）CSS的定位机制——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言 CSS的定位机制文档流定位元素类型浮动定位 float的用处 float的特点 clear属性层定位 position属性

2024年02月05日
浏览(69)
[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言 CSS颜色与背景颜色color属性背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

2024年02月03日
浏览(72)
[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言网页标题：三列自适应宽度网页标题：多行三列自适应宽度一级水平导航菜单：采用“无序列表+超

2024年01月16日
浏览(72)
css 实现超出两行、多行文字省略号显示

在我们日常使用文字超出省略号显示，一般使用下面的方式实现，但是当有需求需要实现两行乃至多行时，该怎么实现呢。单行省略：多行省略： ps：需要注意的是，记得控制元素width。

2024年02月11日
浏览(54)
HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

登录页面门户页面博客页面技术选取: HTML/CSS + VUE2 + ElementUI(Version - 2.15.14) 编程软件: VSCode 环境配置与搭建安装指令 ELement 在 node 下载后，会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置 [1]ElementUI - 2.15.14官网 [2] 获取图片网址 [3] 登录页面获

2024年02月05日
浏览(72)
[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言数据类型数据类型-字符型数据类型-数值型数据类型-布尔型数据类型-其它类型变量转义字符运算

2024年02月20日
浏览(64)