div+css怎么显示两行或三行css div 文字底部对齐，然后多出的部分省略号代替？？

来源：蜘蛛抓取(WebSpider) 时间：2017-08-09 10:47 标签： css div 文字水印
在搭建前台文章列表中，需要实现div内文字显示两行，超出的则省略号显示。
找了很多，都貌似只能一行显示。最后在百度知道找到答案。
答案转自百度知道，题主的自答。
用的是-webkit-私有属性。text-overflow: -o-ellipsis-overflow:text-overflow:display: -webkit--webkit-line-clamp: 2;-webkit-box-orient:另有回答是通过jquery来实现的下载Jquery插件：jQuery ellipsis plugin调用方法：$(document).ready(function() {　　$('.ellipsis').ellipsis();}
阅读(...) 评论()当前位置：
& CSS3 - 让div中的文字不换行（附：超出部分直接截断、或省略号代替）
CSS3 - 让div中的文字不换行（附：超出部分直接截断、或省略号代替）
发布：hangge
默认情况下，如果 div 内的文字如果一行显示不下的话，它会自动折行显示。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&&/title&
.content {
width: 150
height: 60
background-color:
&div class="content"&
欢迎您. 欢迎您. 欢迎您.
1，强制不换行
如果想让文字在一行显示，不要自动换行。将 white-space 样式设置为 nowrap 即可。&
.content {
width: 150
height: 60
background-color:
white-space:
2，超出的部分直接截断
从上面的效果图可以看出，如果强制不换行的话，多余的内容会直接溢出容器。通过“overflow: hidden”样式，可以将超出的部分直接隐藏。
.content {
width: 150
height: 60
background-color:
white-space:
3，多余的部分使用...代替
有时将多余的内容直接隐藏效果也不太好，因为看不出内容是刚好能显示，还是已经被截断了。
（1）这时再添加个“text-overflow: ellipsis”样式，可以让多余的部分用省略号（...）代替。
.content {
width: 150
height: 60
background-color:
text-overflow:
white-space:
（2）text-overflow 还可以设置为 clip，那多余的部分将被直接截去。
.content {
width: 150
height: 60
background-color:
text-overflow:
white-space:css使文字显示两行后显示省略号 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 12时,
css使文字显示两行后，后面的文字只显示...
代码片段(1)
1.&[代码]显示两行文字后用...结束&&&&
content-title a {
color: #000000;
display: -webkit-
-webkit-line-clamp: 2;
-webkit-box-orient:
word-break: break-
开源中国-程序员在线工具：
相关的代码(74)
2楼：炒股亏的内裤都赔了 发表于
怎么用啊 我这不管用 引用了这个样式也没看到效果出来
开源从代码分享开始
纪广财的其它代码当前位置： →
→ CSS控制文字只显示一行 超出部分显示省略号
CSS控制文字只显示一行 超出部分显示省略号
& 作者及来源： 段启锋 - 博客园 &
&收藏到→_→：
摘要: CSS控制文字只显示一行 超出部分显示省略号
"CSS控制文字只显示一行 超出部分显示省略号"：：
&&&& &p style="width: 120 height: 50 border: 1 white-space: overflow: text-overflow: ellipsis"&&&&&&&& 就是比如有一行文字，很长，表格内一行显示不下.&&& &/p&
现在解释一下为什么要这样做：
1、text-overflow:&&
这里的重点样式是&&text-overflow:&&
不过话说text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
简单理解就是我要把文本限制在一行（white-space:&），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow:&hidden；），然后出现省略号（&text-overflow:&ellipsis）。
我在网上看到有很多人说opera不支持text-overflow，可能因为我用的是最新版本的，已经支持这个属性了，所以没办法测试，不过网上给支持低版本的opera一个办法，就是-o-text-overflow：ellipsis；至于火狐，也有很多人说不支持，版本问题无法考证，此文来自: 马开东博客
转载请注明出处 网址：
大家有试过的可以出来指证一下，这里有个《在火狐里 怎样用css限制字数并以点的形式显示》，可以参考一下。
2、white-space
顺便解释一下white-space的用法
white-space属性声明建立布局 中如何处理元素中空白符。（废话一句，这里的空白符应该指我们用键盘敲入的空格或回车，因为用&或&br&无论white-space设置什么都会有空格或回车。）
下面是wschool上white-space可能的值：
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似&html&中的&&pre&&标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到&&br&&标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承&white-space&属性的值。搜索此文相关文章： 控制文字只显示一行 超出部分显示省略号此文来自: 马开东博客
网址: 站长QQ
CSS控制文字只显示一行 超出部分显示省略号_博客园相关文章
博客园_总排行榜
博客园_最新
博客园_月排行榜
博客园_周排行榜
博客园_日排行榜

我要回帖

更多关于 css div 文字水印 的文章

 

随机推荐