css使文字显示两行后显示省略号

本人喜欢把一些实用的东东拿过来，写成文章或者收藏起来。于是乎...

直接上代码：

.article {
    color: #000000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

狠狠的点击，查看效果吧

原文地址：https://www.cnblogs.com/homehtml/p/12625871.html

时间： 2024-11-05 13:45:14

css使文字显示两行后显示省略号的相关文章

css 只好显示两行超过显示点点点

css 只能显示两行超过显示点点点 css 可以做到:.p1{text-align: center;color:#C8CFD6;height:34px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

css 文字展示两行其余的省略号显示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /**

css设置文字不换行并显示省略号

1.单行文本显示省略号 width:value(具体的值):设置容器具体的宽度 white-spacing:nowrap:强制文本在一行内显示 overflow:hidden:溢出内容为隐藏 text-overflow:ellipsis:溢出文本显示省略号 2.多行文本显示省略号 display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden: text-overflow:ellipsis: -webkit-line-clamp

html + CSS实现文字超出长度隐藏,显示省略号

表格: table{ table-layout: fixed; } } t td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一

CSS实现内容超过长度后以省略号显示

样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格. overflow: hidden 隐藏超出单元格的部分. text-overflow: ellipsis 将被隐藏的那部分用省略号代替.

文字超出两行则显示。。。

overflow: hidden; text-overflow: ellipsis; display: box; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

css只显示两行超过显示点点点

.p1{ text-align: center; color:#C8CFD6; height:34px; text-overflow:-o-ellipsis-lastline; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

用CSS让字体在一行内显示不换行（收藏）

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法一般的文字截断(适用于内联与块): .text-overflow{display:block; /*内联对象需加*/width:31em;word-break:keep-all; /* 不换行 */white-space:nowrap; /* 不换行 */overflo

用CSS让字体在一行内显示不换行

青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创大 | 中 | 小当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法一般的文字截断(适用于内联与块): .text-overflow{display:block; /*内联对象需加*/width:31em;word-break:kee