首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

5、单行居中显示文字,多行居左显示,最多两行超过用省略号结尾 这题就厉害了我的哥。...题目就是如上要求,使用纯 CSS,完成单行文本居中显示文字,多行居左显示,最多两行超过用省略号结尾,效果如下: 不愿看长篇大论的可以先看看效果:-webkit- 内核下 Demo 戳我 ?...超出两行省略 完成了第一步,接下来要实现的是超出两行显示省略符号。 多行省略是有专门的新 CSS 属性可以实现的,但是有些兼容性不大好。...(在 -webkit- 内核浏览器下)发现,虽然超出两行的是被省略了,但是第一行也变回了居左,而没有居中。...多行省略与方法一相同。

1.1K50

HTML内超过多少像素以省略号显示

很多时候都有这种需求,页面上的文字显示不下,需要以省略号代替,可能有些人会想到通过控制文字的长度实现,的确,在已知的文字样式下,如果文字全是中文或者全是非中文是可以通过长度来控制的,但是我们的情况通常是中英文混合...通过CSS控制 body...不设置的话只在IE下好用 */ overflow: hidden; /* 超出的部分隐藏起来 */ white-space: nowrap;/* 不显示的地方用省略号...         通过CSS控制不需要改变文本本身,可以在页面渲染的时候就控制如何显示了,并且可以通用,缺点是只能在文字尾部加省略号,但有的时候我想要这种格式...,“测试-看我有多长看我....doc”,如果文本过长的话,.doc前的文本加省略号,保留格式标志,这种CSS就无法控制了。

1.2K00

原生CSS实现单行多余省略和多行多余省略

在日常开发中,经常会遇到一些省略文本的需求,比如“文本在一行显示,超出部分在结尾用省略号显示”、“最多显示三行,超出部分在第三行末尾用省略号显示”。 这些需求用纯CSS即可实现。...webkit-line-clamp: 3; } 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML... 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用... 单行省略 .one-line 定义了单行省略样式,样式含义: overflow: hidden 隐藏超出元素区域的内容 text-overflow: ellipsis 以省略号显示超出的文本...定义了多行省略样式,样式含义: overflow: hidden 隐藏超出元素区域的内容 text-overflow: ellipsis 以省略号显示超出的文本 display: -webkit-box

3K20

文本内容超出省略

, 17 4月 2021 作者 847954981@qq.com 前端学习 文本内容超出省略 在网页中我们经常出现一些文本超出的情况,而一般网页对此的解决方案是通过省略号还省略超出部分。...单行文本超出省略 知识点:强制不换行、元素内容溢出处理和文本溢出省略。...并且超出的内容不可见 inherit 内容不会被修剪,会呈现在元素框之外 scroll 内容会被修剪,浏览器会显示滚动条以便查看超出的内容 auto 由浏览器定夺,如果内容被修剪,就会显示滚动条 文本溢出省略...ellipsis:表示用一个省略号 (“…”)来表示被截断的文本。...多行文本超出省略 在WebKit内核中,多行文本超出省略比较简单,首先我们需要将之前单行文本中的不换行属性white-space: nowrap去掉,并设置一下属性: /* 隐藏超出部分 */ overflow

1.1K50
领券