CSS 设置文字只显示一行，多余显示省略号

CSS 设置文字只显示一行，多余显示省略号


.view-text{/**思路：1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示“……”*/display: inline-block;white-space: nowrap; width: 100%; overflow: hidden;text-overflow:ellipsis;
}

显示两行

<div class="text2">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>/**
思路：1.超出的文本隐藏2.溢出用省略号显示3.溢出不换行4.将对象作为弹性伸缩盒子模型显示5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数*/.text2{width:200px;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

CSS 设置文字只显示一行，多余显示省略号相关推荐

html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)
我们在做前端时,经常会要求文字只在一行显示.当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?通过CSS中的word-break,white-s ...
html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...
css设置文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代仅仅是用来提示自己,不要忘记的让文字只显示一行,超出显示省略号 overflow: hidden ...
php 自定义行间距,CSS设置文字行间距的方法介绍（代码示例）
本篇文章的内容是关于CSS设置文字行间距的方法介绍,内容很详细,有需要的朋友可以参考一下. 对于行间距的设置肯定是需要行高属性line-height来设置间距.(相关推荐:CSS学习手册) 指定绝对值 ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
css 设置文字隐藏
css 设置文字隐藏设置display: none:但是这个设置后,后面的字体将会向前移动:就是隐藏之后不占位置: 设置opacity: 0 :会被子元素继承,但是不能设置子元素opacity:0来 ...
CSS设置文字的划线
CSS设置文字的划线文字加上下划线.顶划线和删除线,在文档中是经常使用的. CSS中通过设置文字的text-decoration属性,来实现这些特殊的效果. <span style=" ...
如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...

CSS 设置文字只显示一行，多余显示省略号

CSS 设置文字只显示一行，多余显示省略号相关推荐

最新文章

热门文章