css:
.box{ width: 100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
white-space: 不换行。强制在一行显示。
text-overflow: 处理溢出的文本: 以省略号代替。
1
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1531.html
摘要:实现文本溢出显示省略号在做响应式网页的时候,我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定。 css实现文本溢出显示省略号 在做响应式网页的时候,我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定。 基础设置 在介绍下面的方法之前,我们先对所有的例子进行基础的样式设置 /*基础设置*/ div.box{ width: 100px; ...
摘要:一个长单词超出整个容器宽度时是否换行必须注意到,这是一个长单词便超出容器宽度的情况,而且只需考虑英文,中文没有此特性。规定如何处理内容溢出容器属性作用于型元素上。 前言 文本方面的CSS内容不少,但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么,今天仅仅来谈谈其中最复杂的部分——文本格式。 处理换行、空格和Tab:white-space 众所周知,...
摘要:前端芝士树纯实现多行文本溢出显示省略号使用来控制行数由于用来限制在一个块元素显示的文本的行数这是一个不规范的属性,它没有出现在规范草案中,为了实现该效果,它需要组合其他外来的属性。 【前端芝士树】纯CSS实现多行文本溢出显示省略号 使用-webkit-line-clamp来控制行数 由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(u...
摘要:前言多行文本超出高度限制出现省略号移动端多为内核的有扩展属性但并不是规范中的属性端往往要借助去实现这一效果,但麻烦且不是很靠谱,今天就用纯来实现一个完全兼容的多行省略。 前言 多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻烦且不是很靠谱,今...
阅读 1625·2021-09-22 15:25
阅读 1506·2021-09-07 10:06
阅读 3183·2019-08-30 15:53
阅读 1090·2019-08-29 13:12
阅读 3373·2019-08-29 13:07
阅读 725·2019-08-28 18:19
阅读 2269·2019-08-27 10:57
阅读 982·2019-08-26 13:29