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

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

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

1.3K20

翻译:如何使用CSS实现多行文本省略号显示

不过本文将要介绍方法是采用CSS规范属性,并结合特殊实现技巧完成。...CSS实现多行文本溢出省略号显示 我们把实现细节划分为7个步骤,在这个实现过程中最简单就是截断文本,而最难部分则是让一个元素处在其父包含块溢出右下方,并且当元素未溢出时该元素消失不可见。...,当文本溢出情形下该元素显示在正确位置上。...4th 削窄prop元素 目前,最左侧prop元素作用在于让realend元素在文本溢出时处在其正下方,在前几节示例代码为了直观演示,设置prop元素宽度为100px,那么现在为了更好模拟实际效果...6th 隐藏 之前实现文本溢出情况下,realend元素会出现在元素右侧,正如 ? 。

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

overflow:hidden作用能治住塌陷_html溢出隐藏代码

一. overflow:hidden 溢出隐藏 给一个元素设置overflow:hidden,那么该元素内容若超出了给定宽度和高度属性,那么超出部分将会被隐藏,不占位。... 效果如下: 一般情况下,在页面,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出内容显示省略号。...white-space: nowrap; /*规定文本不进行换行*/ text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(...)*/ } 效果如下: 二....当级元素内部子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,级元素检测不到子元素高度,级元素高度为0。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.8K30

CSS3进阶整理

这里有三个比较常见: li:first-child{} //匹配元素第一个子元素 li:last-child{} //匹配元素最后一个子元素 最后一个为:nth-child(){},这个伪类比较复杂...正常情况下,文本内容超出所给宽度范围时,文字会自动换行,但我们希望它换行就需要文本溢出省略操作了。...这里需要完成三步:强制不换行、元素内容溢出处理、文本溢出省略。...1.强制不换行:H5推荐使用 white-space:nowrap 方法来实现不换行 2.元素内容溢出 overflow 这一步我们目标是超出部分不显示,使用overflow属性。...内容会被修剪,浏览器会显示滚动条以查看超出内容 auto 浏览器定夺,如果内容被修剪,就会显示滚动条 3.文本溢出省略 text-overflow 我们目的是将超出内容省略,并用省略号表示,这一步就是

1K10

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

在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节。看上去 “稀松平常” ,但在实现上却有不同区分,是单行截断还是多行截断?多行截断判断是基于行数还是基于高度?...text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪文本) 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号,否则不显示省略号 省略号位置显示刚好 短板...;(和 1 结合使用 ,设置或检索伸缩盒对象子元素排列方式 ) overflow: hidden;(文本溢出限定宽度就隐藏内容) text-overflow: ellipsis;(多行文本情况下...(按高度) ○ 多行文本溢出不显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定宽度就隐藏内容) line-height: 20px;(结合元素高度,高度固定情况下,设定行高..., 控制显示行数) max-height: 40px;(设定当前元素最大高度) 优点 无兼容问题 响应式截断 短板 单纯截断文字, 展示省略号,观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号情况

2.3K40

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

在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节。看上去 “稀松平常” ,但在实现上却有不同区分,是单行截断还是多行截断?多行截断判断是基于行数还是基于高度?...text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪文本) 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号,否则不显示省略号 省略号位置显示刚好 短板...;(和 1 结合使用 ,设置或检索伸缩盒对象子元素排列方式 ) overflow: hidden;(文本溢出限定宽度就隐藏内容) text-overflow: ellipsis;(多行文本情况下...(按高度) ○ 多行文本溢出不显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定宽度就隐藏内容) line-height: 20px;(结合元素高度,高度固定情况下,设定行高..., 控制显示行数) max-height: 40px;(设定当前元素最大高度) 优点 无兼容问题 响应式截断 短板 单纯截断文字, 展示省略号,观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号情况

2.1K00

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

本文首发于政采云前端团队博客:可能是最全文本溢出截断省略” 方案合集 https://www.zoo.team/article/text-overflow 前言 在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节...;(和 1 结合使用 ,设置或检索伸缩盒对象子元素排列方式 ) overflow: hidden;(文本溢出限定宽度就隐藏内容) text-overflow: ellipsis;(多行文本情况下...再进阶一步,多行文本溢出省略(按高度) ○ 多行文本溢出不显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定宽度就隐藏内容) line-height: 20px;(结合元素高度...,高度固定情况下,设定行高, 控制显示行数) max-height: 40px;(设定当前元素最大高度) 优点 无兼容问题 响应式截断 短板 单纯截断文字, 展示省略号,观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号情况...;(文本溢出限定宽度就隐藏内容) float: right/left;(利用元素浮动特性实现) position: relative;(根据自身位置移动省略号位置, 实现文本溢出显示省略号效果) word-break

3.1K11

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

本文首发于政采云前端团队博客:可能是最全文本溢出截断省略” 方案合集 https://www.zoo.team/article/text-overflow 前言 在我们日常开发工作文本溢出截断省略是很常见一种需考虑业务场景细节...;(和 1 结合使用 ,设置或检索伸缩盒对象子元素排列方式 ) overflow: hidden;(文本溢出限定宽度就隐藏内容) text-overflow: ellipsis;(多行文本情况下...再进阶一步,多行文本溢出省略(按高度) ○ 多行文本溢出不显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定宽度就隐藏内容) line-height: 20px;(结合元素高度...,高度固定情况下,设定行高, 控制显示行数) max-height: 40px;(设定当前元素最大高度) 优点 无兼容问题 响应式截断 短板 单纯截断文字, 展示省略号,观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号情况...;(文本溢出限定宽度就隐藏内容) float: right/left;(利用元素浮动特性实现) position: relative;(根据自身位置移动省略号位置, 实现文本溢出显示省略号效果) word-break

3.4K20

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

,受限于屏幕宽高等因素,有可能不能完全显示,这个时候就会把溢出文本显示成省略号。...可是有时候产品同学希望显示文本可以再多一点,于是就有了多行文本溢出显示省略号需求,如下图所示。 这个功能也可以通过css实现,如下图代码块所示。...x行溢出显示省略号方式展示。...这就需要计算出文本实际占用宽度才能选择采用哪种展示方式。 查找资料得知,canvas提供了一个measureText方法,该方法返回包含一个对象,这个对象里包含了以像素计指定字体宽度。...但通过canvas计算出来结果,会导致每一行文本增多了,从而跟预期展示效果有出入。 因此,这种方案只能适用于文本包含特殊符号和英文单词场景。

2K20

CSS 换行_css不允许换行

; // 溢出不换行 overflow: hidden; // 超出文本隐藏 text-overflow: ellipsis; // 溢出省略号显示 */ 3、多行文本截断(超过两行或三行用省略号…...css规范属性,需要组合上面两个属性使用 text-overflow: ellipsis; //可选属性,可以用来多行文本情况下,用省略号“…”隐藏超出范围文本。...默认值:0 % 基于元素宽度百分比缩进 inherit 规定应该从父元素继承 text-indent 属性值。 white-space:normal 默认。...定义带有小写字母和大写字母标准文本 capitalize 文本每个单词以大写字母开头 uppercase 定义仅有大写字母 lowercase 定义无大写字母,仅有小写字母 inherit...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

3.5K40

前端成神之路-CSS高级技巧

属性值 描述 visible 剪切内容也添加滚动条 hidden 不显示超过对象尺寸内容,超出部分隐藏掉 scroll 不管超出内容否,总是显示滚动条 auto 超出自动显示滚动条,超出不显示滚动条...防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动鼠标指针采用何种系统预定义光标形状。...溢出文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。...4.2 text-overflow 文字溢出 设置或检索是否使用一个省略标记(…)标示对象内文本溢出 text-overflow : clip ;不显示省略标记(...)...负边距+定位:水平垂直居中 咱们前面讲过, 一个绝对定位盒子, 利用 级盒子 50%, 然后 往左(上) 走 自己宽度一半 ,可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 ?

6.8K30

Css 实现多行文字截断

响应式截断,根据不同宽度做出调整 文本超出范围才显示省略号,否则不显示省略号 省略号位置显示刚好 基于上述准则,下面我就讲介绍各种技巧实现截断效果,并根据上述评判标准得出最优解。...text-overflow:ellipsis; 可选属性,可以用来多行文本情况下,用省略号“…”隐藏超出范围文本。 实现效果: ? 实现效果 优点: 响应式截断,根据不同宽度做出调整。...缺点:也是很直接,因为 -webkit-line-clamp 是一个规范属性,它没有出现在 CSS 规范草案。...实现效果 优点: 兼容性好,对各大主流浏览器有好支持 响应式截断,根据不同宽度做出调整 缺点:但是它无法识别文字长短,即文本超出范围才显示省略号,否则不显示省略号。...回到事情本质来看:我们希望 CSS 能够有一种属性,能够在文字溢出情况下显示省略号溢出时不显示省略号(两种形式,两种效果)。

2.2K00

CSS第五天-定位

CSS第五天-定位 静态定位:static 定位默认值,写边偏移也不会有效果 ---- 相对定位:relative 元素搭配子绝相使用 根据自身原来位置,进行定位 没有脱标,在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)祖先元素来定位 子绝相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...margin: 0 auto 浮动元素 === 给外面标准流元素设置 宽度和margin:0 auto 定位元素 === left: 50% translateX(-50%) 溢出隐藏:overflow...: auto white-space: nowrap;(设置文字在一行显示,不能换行) text-overflow: ellipsis;(规定当文本溢出时,显示省略号来代表被修剪文本) ---- 边框圆角...设置vertical-align: middle ---- 垂直用法: 文本框和表单按钮无法对齐 input和img无法对齐 div文本框,文本框无法贴顶问题 div设高度由img标签撑开,此时

2.7K40

第141天:前端开发浏览器兼容性问题总结(二)

垂直居中问题 问题: 在浏览器想要垂直居中,设置vertical-align:middle; 不起作用。...IE6 width为奇数,右边多出1px问题 问题: 级元素采用相对定位,且宽度设置为奇数时,子元素采用绝对定位,在ie6会出现右侧多出1像素 解决: 将宽度奇数值改成偶数 12....IE6两个层之间3px问题 问题:        左边层采用浮动,右边没有采用浮动,这时在ie6两层之间就会产生3像素间距 解决: 1、右边层也采用浮动  float 2、左边层添加属性 margin-right...32. li内容以省略号显示 问题: li内容超过长度时,想以省略号显示, 此方法适用于ie6-7-8、opera、safari浏览器  ff浏览器不支持 解决: li{width:200px;white-space...子容器宽度大于容器宽度时,内容超出 问题: 子DIV宽度DIV宽度都已经定义,在IE6如果其子DIV宽度大于DIV宽度DIV宽度将会被扩展,在其他浏览器DIV宽度将不会扩展

1.9K21

jQuery.dotdotdot多行文本省略号插件使用方法

最近在做一个自适应网站,经常遇到需要文本溢出地方,我写了一个CSS简单设置文本溢出方法:用css实现文本溢出div显示省略号 但是IE只能设置单行溢出隐藏,Webkit内核浏览器才支持多行溢出,于是找到了这款插件...什么是dotdotdot Dotdotdot是一款截断网页多行内容jQuery插件,当前文本超出范围自动显示省略号。 该插件可以在省略号之后,内容结尾处添加“More/更多”锚点。...: "\u2026 ",             /* 添加文本省略号 */             height: null,             /* 元素(最大)高度:              ..."/字母. */             watch: "window",             /* 是否更新省略号:              true: 监测元素宽度和高度;              ..."window": 检测窗口宽度和高度. */         });     }); 在插件被激发之后,通过存储在“dotdotdot”数据属性API可以获得一系列方法:     $(function

2.3K01

前端正确处理“文字溢出思路

通常我们在自己应用展示很多文件信息时候,往往选择布局方式就是高度是一定,说白了就是高度其实我们是定死宽度我们不确定,因为用户有可能会在某些情况下拖动浏览器,造成宽度发生变化,但是总会给宽度一个最小值和一个最大值来保障排版统一性...我们发现,下面多出去文字倒是被省略了,但是我们省略号呢??我就不卖官子了,其实造成这个原因答案就是下面这句话: 我们仔细看上面我们溢出场景。...理清思路 首先我们因为要做到通用性所以, container 宽度是不能确定,它宽度需要根据它外层元素来决定,也就是上文中我们提到有一个最大值最小值宽度元素。...完成 autoEllipsis 函数 第一步就是为了拿到我们放入文字宽度。注释已经写很清楚了,就不过多赘述。 然后我们再去拿外面元素宽度。...此时会出现第一个分支, container 宽度小于元素宽度,很容易可以猜到现在我们文字内容是完全可以容纳,不需要做特殊处理。

61540

每天10个前端小知识 【Day 18】

在日常开发展示页面,如果一段文本数量过长,受制于元素宽度因素,有可能不能完全显示,为了提高用户使用体验,这个时候就需要我们把溢出文本显示成省略号。...对于文本溢出,我们可以分成两种形式: 单行文本溢出 多行文本溢出 实现方式 单行文本溢出省略 理解也很简单,即文本在一行内显示,超出部分以省略号形式展现 实现方式也很简单,涉及css属性有: text-overflow...:规定当文本溢出时,显示省略符号来代表被修剪文本 white-space:设置文字在一行显示,不能换行 overflow:文字长度超出限定宽度,则隐藏超出内容 overflow设为hidden,...核心css代码结构如下: position: relative:为伪元素绝对定位 overflow: hidden:文本溢出限定宽度就隐藏内容) position: absolute:给省略号绝对定位...: ellipsis:多行文本情况下,用省略号“…”隐藏溢出范围文本 p { width: 400px; border-radius: 1px

10810
领券