css怎么让多余文字显示省略号

如果只显示一行，则可以使用以下方法：

　　overflow: hidden;

　　text-overflow:ellipsis;

　　white-space: nowrap;

如果需要显示多行，在需要设置的元素style中添加以下代码：

　　word-break: break-all;

　　text-overflow: ellipsis;

　　display: -webkit-box;

　　-webkit-box-orient: vertical;

　　-webkit-line-clamp: 2;

　　overflow: hidden;

只显示两行：

overflow: hidden; //超出隐藏

text-overflow: ellipsis; //超出使用省略号

display: -webkit-box;

-webkit-line-clamp: 2; //第几行

-webkit-box-orient: vertical;

width: 192px; //根据需要自定义设置

height: 60px; //根据文字高度自定义设置为两行行高

（注意：有时添加在嵌入样式中不生效，需要添加在行内样式中）

css怎么让多余文字显示省略号相关推荐

CSS设置文本不换行多余文字显示省略号
文章目录一.使用步骤一.使用步骤 1.文字单行不换行多余文字显示省略号代码如下(示例): white-space: nowrap;display: block;overflow: hidden; ...
css设置p标签多余文字显示省略号
效果: <p><strong>商品名称:</strong>新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</p></div> ...
css文本溢出时候，如何把多余的文字显示省略号
css文本溢出时候,如何把多余的文字显示省略号日常做的项目中常常有这种需要我们对溢出文本进行"-"显示的操作(我也是通过一行文字到下一行,破坏了我的布局,所以才去找各种办法,然后 ...
CSS设置溢出文字显示省略号
CSS设置溢出文字显示省略号相关CSS .text-ellipse{ width: 100px;height:50px;border:2px solid red;overflow:hidden;te ...
css超出两行省略号没效果,Css 设置超过再两行显示省略号
大部分场景都是超过一行就显示... {{item.name}} {{item.name}} export default { return { item: {name:'this is a very ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
完美解决向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示......
效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...
css多行文本超出显示省略号无效解决方法
css多行文本超出显示省略号,以2行为例,网上很多解决方法,如下.之前一直采用的是这种方法,最近发现无效了.vant也是这种写法, .txt-ellipsis-2 {display:-webkit-b ...

css怎么让多余文字显示省略号

css怎么让多余文字显示省略号相关推荐

最新文章

热门文章