首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Css 实现多行文字截断

响应式截断,根据不同宽度做出调整 文本超出范围显示省略号,否则不显示省略号 省略号位置显示刚好 基于上述准则,下面就讲介绍各种技巧实现截断效果,并根据上述评判标准得出最优解。...float 特性实现多行文本截断 回到一开始要做内容是多行标题文字截取效果,显然是无法控制标题长度,显然是无法使用上述方式。...正当我以为 CSS 已经无能为力,只能通过 JS 去实现时候,后来看到了一个方法非常巧妙,而且能够满足上述提到所有准则,下面就介绍如何通过 float 特性实现多行文本截断效果。...好了,这样两种状态两种展示形式已经区分开了,那么我们可以将黄色盒子进行相对定位,将内容溢出黄色盒子移动到文本内容右下角,溢出则会被移到外太空去了,只要我们使用 overflow:hidden就可以隐藏掉...添加 word-break:break-all; 使一个单词能够在换行时进行拆分,这样文字和省略号贴合效果更佳。 这个方法应该是看到最好用纯 CSS 处理方式了,如果你有更好方法,欢迎交流!

2.2K00

熟悉white-space

定义和用法 white-space 属性设置如何处理元素内空白。 这个属性声明建立布局过程如何处理元素空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增。...其行为方式类似 HTML 标签 nowrap 文本不会换行文本会在在同一行上继续,直到遇到 标签为止 pre-wrap 保留空白符序列,但是正常地进行换行 pre-line...合并空白符序列,但是保留换行符 inherit 规定应该从父元素继承 white-space 属性值 可能使用场景 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数...需要使用对对溢出文本显示省略号通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度未被显示而已。...;宽度设定主要是针对IE6; 该方法支持Internet Explorer, Safari, Chrome 和 Opera,但FF并不支持,不过可以通过Jquery来实现类似的效果。

81930
您找到你想要的搜索结果了吗?
是的
没有找到

可能是最全文本溢出截断省略” 方案合集

本文首发于政采云前端团队博客:可能是最全文本溢出截断省略” 方案合集 https://www.zoo.team/article/text-overflow 前言 在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节...) text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪文本) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号位置显示刚好 短板...,用省略号 “…” 隐藏溢出范围文本) 优点 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号显示位置刚好 短板 兼容性一般:-webkit-line-clamp 属性只有 WebKit...○ 基于 JavaScript 实现方案 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 短板 需要 JS 实现,背离展示和行为相分离原则 文本为中英文混合时,省略号显示位置略有偏差...: break-all;(使一个单词能够在换行时进行拆分) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 短板 省略号显示可能不会刚刚好,有时会遮住一半文字 适用场景 适用于对省略效果要求较低

3.1K11

可能是最全文本溢出截断省略” 方案合集

本文首发于政采云前端团队博客:可能是最全文本溢出截断省略” 方案合集 https://www.zoo.team/article/text-overflow 前言 在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节...) text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪文本) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号位置显示刚好 短板...,用省略号 “…” 隐藏溢出范围文本) 优点 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号显示位置刚好 短板 兼容性一般:-webkit-line-clamp 属性只有 WebKit...○ 基于 JavaScript 实现方案 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 短板 需要 JS 实现,背离展示和行为相分离原则 文本为中英文混合时,省略号显示位置略有偏差...: break-all;(使一个单词能够在换行时进行拆分) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 短板 省略号显示可能不会刚刚好,有时会遮住一半文字 适用场景 适用于对省略效果要求较低

3.3K20

前段:可能是最全文本溢出截断省略” 方案合集

在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节。看上去 “稀松平常” ,但在实现上却有不同区分,是单行截断还是多行截断?多行截断判断是基于行数还是基于高度?...text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪文本) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号位置显示刚好 短板...,用省略号“…”隐藏溢出范围文本) 优点 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号显示位置刚好 短板 兼容性一般: -webkit-line-clamp 属性只有 WebKit... 复制代码运行代码 示例图片 ○ 基于 JavaScript 实现方案 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 加粗文字短板 需要 JS...根据自身位置移动省略号位置, 实现文本溢出显示省略号效果) word-break: break-all;(使一个单词能够在换行时进行拆分) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号

2.3K40

前段:可能是最全文本溢出截断省略” 方案合集

在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节。看上去 “稀松平常” ,但在实现上却有不同区分,是单行截断还是多行截断?多行截断判断是基于行数还是基于高度?...text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪文本) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号位置显示刚好 短板...,用省略号“…”隐藏溢出范围文本) 优点 响应式截断 文本溢出范围显示省略号,否则不显示省略号 省略号显示位置刚好 短板 兼容性一般: -webkit-line-clamp 属性只有 WebKit... 复制代码运行代码 示例图片 ○ 基于 JavaScript 实现方案 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号 加粗文字短板 需要 JS...根据自身位置移动省略号位置, 实现文本溢出显示省略号效果) word-break: break-all;(使一个单词能够在换行时进行拆分) 优点 无兼容问题 响应式截断 文本溢出范围显示省略号,否则不显示省略号

2.1K00

CSS3进阶整理

列表伪类功能更像一个选择器,用来选择某个元素子元素,并更改其样式。...正常情况下,文本内容超出所给宽度范围时,文字会自动换行,但我们不希望它换行就需要文本溢出省略操作了。...这里需要完成三步:强制不换行、元素内容溢出处理、文本溢出省略。...1.强制不换行:H5推荐使用 white-space:nowrap 方法来实现不换行 2.元素内容溢出 overflow 这一步我们目标是超出部分不显示,使用overflow属性。...内容会被修剪,浏览器会显示滚动条以查看超出内容 auto 浏览器定夺,如果内容被修剪,就会显示滚动条 3.文本溢出省略 text-overflow 我们目的是将超出内容省略,并用省略号表示,这一步就是

1K10

深入扩展文本溢出解决方案

在实际开发不管是移动端还是 PC 端都会遇到文本太长,因为宽度不够导致我们需要设置成省略号文本文本溢出做一个总结,希望对你们开发过程中有帮助。...阅读本文你将看到如下几部分内容: 单行文本溢出 多行文本溢出 拓展多行文本溢出 自定义多行文本溢出 高亮多行文本溢出 单行文本溢出 一行文本超出显示是一个最基本超出最大宽度,显示省略号[1],效果如图所示...拓展多行文本溢出 在支持了多行文本溢出显示省略号功能之后,产品同学又发现体验不友好点,如下图所示,文本在第二行开头处就结束了,这就导致第二行大部分是空白内容,影响了美观度。 ?...自定义多行文本溢出 过一段时间之后,产品同学又提出了新进阶版需求 文本首行开头需要缩进或者可以配置一个图标; 文本末尾可以配置按钮或者图标,并且如果文本超过了范围需要显示省略号,但是省略号需要在按钮或图标的前面...由于文本高亮需要通过标签将文本包裹起来并添加高亮样式才能实现,之前组件是通过 v-text 方式实现,因此这里不能直接使用,需要将组件改造成 v-html 方式插入可以。

1.3K20

文本溢出截断省略

文本溢出截断省略 文本溢出截断省略是比较常见业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行截断方案比较简单,多行截断相对比较复杂。...单行溢出省略 单行文本溢出截断省略直接使用CSS即可,其无兼容问题,文本溢出范围显示省略号,否则不显示省略号省略号位置显示刚好,但是只能作为单行文本溢出截断省略解决方案。...方案 多行文本溢出截断省略按行计算使用CSS,其文本溢出范围显示省略号,否则不显示省略号省略号位置显示刚好,但是兼容性一般,line-clamp属性只有WebKit内核浏览器支持,多适用于移动端页面...} 按行计算 Js方案 多行文本溢出截断省略按行计算使用Js,其无兼容问题,文本溢出范围显示省略号,否则不显示省略号,但是需要Js实现,背离展示和行为相分离原则,文本为中英文混合时...CSS,利用Float浮动,通过::before与::after两个伪元素实现浮动操作,其无兼容问题,文本溢出范围显示省略号,否则不显示省略号,但省略号显示可能不会刚刚好,有时会遮住一半文字。

1.6K10

浅谈移动端过长文本溢出显示省略号实现方案

,受限于屏幕宽高等因素,有可能不能完全显示,这个时候就会把溢出文本显示成省略号。...可是有时候产品同学希望显示文本可以再多一点,于是就有了多行文本溢出显示省略号需求,如下图所示。 这个功能也可以通过css实现,如下图代码块所示。...x行溢出显示省略号方式展示。...浏览器实际渲染出来时候,如果末尾有特殊符号时会连同前面的字符一起换行如果末尾有英文单词时也会将这个英文单词换行展示。...由于文本高亮需要通过标签将文本包裹起来并添加高亮样式才能实现,之前组件是通过v-text方式实现,因此这里不能直接使用,需要将组件改造成v-html方式插入可以。

2K20

文本溢出-超出文本显示为省略号

HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑文本超出问题。...实现文本超出显示为省略号 使用CSS实现元素文本超出隐藏,通常存在两种方式,一种是超出直接隐藏内容,另一种是超出显示为省略号。...> HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作时候,我们什么时候应该考虑内容撑开宽高,...</di 多行文本超出显示为省略号 多行文本超出显示为省略号需求,仅仅使用HTML和CSS就很难实现了。通常我们可以使用JS辅助进行实现。...多行内容描述部分需要设置超出隐藏;单行列表页标题,可以设置超出隐藏或超出显示为省略号; 3 对于内容页标题和内容,千万不要随意设置固定高度,也不要设置超出隐藏。

2.1K40

CSS 换行_css不允许换行

大家好,又见面了,是你们朋友全栈君。 1、强制换行 word-break: break-all; /*只对英文起作用,以字母作为换行依据。...如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,不会把单词截断掉。*/ white-space: pre-wrap; /*只对中文起作用,强制换行。...; // 溢出换行 overflow: hidden; // 超出文本隐藏 text-overflow: ellipsis; // 溢出省略号显示 */ 3、多行文本截断(超过两行或三行用省略号…...css规范属性,需要组合上面两个属性使用 text-overflow: ellipsis; //可选属性,可以用来多行文本情况下,用省略号“…”隐藏超出范围文本。...其行为方式类似 HTML 标签 nowrap 文本不会换行文本会在在同一行上继续,直到遇到 标签为止 pre-wrap 保留空白符序列,但是正常地进行换行 pre-line

3.5K40

CSS用户界面样式

溢出文字隐藏 word-break:自动换行 normal 使用浏览器默认换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。...通常我们使用于强制一行显示内容 normal :  默认处理方式 nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象换行。...可以处理中文 text-overflow 文字溢出 text-overflow : clip | ellipsis 设置或检索是否使用一个省略标记(...)标示对象内文本溢出 clip :  不显示省略标记...单行文本溢出显示省略号:注意一定要首先强制一行内显示,再次和overflow属性 搭配使用 white-space:nowrap; overflow:hidden; text-overflow:ellipsis...; 多行文本溢出显示省略号: 有较大兼容性问题,适合于webkit内核浏览器或移动端。

1.8K40

CSS高级技巧 CSS用户界面样式

溢出文字隐藏 word-break:自动换行 normal 使用浏览器默认换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。...通常我们使用于强制一行显示内容 normal :  默认处理方式 nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象换行。...可以处理中文 text-overflow 文字溢出 text-overflow : clip | ellipsis 设置或检索是否使用一个省略标记(...)标示对象内文本溢出 clip :  不显示省略标记...单行文本溢出显示省略号:注意一定要首先强制一行内显示,再次和overflow属性 搭配使用 white-space:nowrap; overflow:hidden; text-overflow:ellipsis...; 多行文本溢出显示省略号: 有较大兼容性问题,适合于webkit内核浏览器或移动端。

2K31

文本内容超出省略

, 17 4月 2021 作者 847954981@qq.com 前端学习 文本内容超出省略 在网页我们经常出现一些文本超出情况,一般网页对此解决方案是通过省略号还省略超出部分。...单行文本超出省略 知识点:强制不换行、元素内容溢出处理和文本溢出省略。...文本内容超出前提就是文本实现不换行: white-space: nowrap;//文本换行 元素内容溢出 overflow overflow属性决定了超出盒子内容怎么显示,它有五个效果值: 值 描述...ellipsis:表示用一个省略号 (“…”)来表示被截断文本。...多行文本超出省略 在WebKit内核,多行文本超出省略比较简单,首先我们需要将之前单行文本换行属性white-space: nowrap去掉,并设置一下属性: /* 隐藏超出部分 */ overflow

1.1K50

CSS 单多行文本溢出样式

单行文本溢出省略 核心 CSS 语句 overflow: hidden; 文字长度超出限定宽度,则截断超出内容 white-space: nowrap; 规定段落文本不进行换行 text-overflow...: ellipsis; 文本溢出时,用省略号来代替 Demo div { width: 150px; height: 50px; border: 1px solid red;...webkit 属性 -webkit-box-orient: vertical; 和 1 结合使用,设置或检索伸缩盒对象子元素排列方式 display: -webkit-box; 和 1 结合使用,...将对象作为弹性伸缩盒子模型显示 overflow: hidden; 文字长度超出限定宽度,则截断超出内容 text-overflow: ellipsis; 文本溢出时,用省略号来代替 Demo 效果图 这样就很容易实现了多行文本溢出显示省略号效果,不过这个方案有个不好点就是兼容性不好 -webkit-line-clamp 属性只有 webkit 内核浏览器支持

1.7K30

「趣学前端」优雅又精致,来看看别人家表格样式是怎样实现

背景 身边一些非互联网技术从业朋友,偶尔看我转发到朋友圈文章,会表示出一定兴趣。...注意省略号功能同时要为元素设置不换行white-space: nowrap以及内容超出时隐藏overflow: hidden。 带分组表格 rowspan 属性可以定义表头单元格应该横跨行数。...省略号 以下知识内容来自于菜鸟教程 属性名 作用 属性值 text-overflow 属性指定当文本溢出包含它元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...)...或显示自定义字符串(不是所有浏览器都支持)。 clip:剪切文本。 ellipsis:显示省略符号 ... 来代表被修剪文本。 string:使用给定字符串来代表被修剪文本。...nowrap:文本不会换行文本会在同一行上继续,直到遇到<br> 标签为止。 pre-wrap:保留空白符序列,但是正常地进行换行。 pre-line:合并空白符序列,但是保留换行符。

1.6K20
领券