html div内第二行文字显示不下的时候才用省略号代替 css实现

Cheriselalala 发布于2019-04-23 13:36 / 3168人阅读

摘要：有时候文字太多，但为了美观想要在第二行的时候才显示省略号，而不是第一行超出马上就出现省略号下面是代码显示省略号块元素显示的文本行数截图定义在上就可以了上效果图这样文字不会到第三行

有时候文字太多，但为了美观想要在第二行的时候才显示省略号，而不是第一行超出马上就出现省略号

下面是css代码：

overflow:hidden;
text-overflow: ellipsis;//显示省略号
display:-webkit-box;
-webkit-line-clamp:2;//块元素显示的文本行数
-webkit-box-orient:vertical;

截图：

定义在div上就可以了

上效果图

这样文字不会到第三行

超融合服务器服务器托管 html 第二行文本 html省略显示 html图片显示字 html 竖着显示字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2090.html

CSS伪类伪元素详解

摘要：选择器大致可以分成类基本选择器，层次选择器，属性选择器，伪类，伪元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。 CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是...

lookSomeone 2019-08-29 11:09 评论0 收藏0
CSS2:宽度与高度疑难点解析

摘要：宽度与高度如果你的代码里经常出现和属性说明你对宽度与高度理解的不够深文档流翻译很烂应该为普通流或者常规流的高度字体高度与行高字和字之间是通过基线对齐的行高与默认行高是字体设计室写进去的不同字体行高不一样跟字体设计有关系字体的建议行高写在了 CSS2:宽度与高度如果你的CSS代码里经常出现height和width属性,说明你对宽度与高度理解的不够深 1.文档流(Normal Flow)...

raledong 2019-08-29 15:43 评论0 收藏0
多行或者单行文本超出显示点点点，如果保证内容始终垂直居中？

摘要：我现在的需求是这样的，我目前实现了一个框，显示文字，超出两行显示，如果单行要保证垂直居中，我如果给容器使用则当文字内容过多的时候会不上下文字有截断现在效果如下只能显示两行，超出显示省略号解决方法垂直居中的我现在的需求是这样的，我目前实现了一个div框，显示文字，超出两行显示...，如果单行要保证垂直居中，我如果给容器使用display:flex;align-items:center；则当文字...

sydMobile 2019-04-23 13:09 评论0 收藏0
CSS 学习笔记——CSS Selector

摘要：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。新增属性选择器用于定义元素属性以开头的元素的样式如上所示，标记链接为绿色。可以是数字，或关键字或公式。 CSS1 中定义的选择器类型选择器用于选择指定类型的元素（其实他就是 html 标签选择器），常见用法如下： body { /*对 body 元素定义样式*/ } body,div { ...

edagarli 2019-08-29 12:48 评论0 收藏0
CSS 学习笔记——CSS Selector

摘要：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。新增属性选择器用于定义元素属性以开头的元素的样式如上所示，标记链接为绿色。可以是数字，或关键字或公式。 CSS1 中定义的选择器类型选择器用于选择指定类型的元素（其实他就是 html 标签选择器），常见用法如下： body { /*对 body 元素定义样式*/ } body,div { ...

邱勇 2019-08-01 17:03 评论0 收藏0