css怎么让第二行内容显示不下的时候自动省略号！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怎么让第二行内容显示不下的时候自动省略号！相关的知识，希望对你有一定的参考价值。
css怎么让第二行内容显示不下的时候自动省略号！
原：你好，你好，你好，你好，你好，你好，你好，你好，
你好，你好，你好，你好，你好，你好，你好，你好，
你好，你好，你好，你好，你好，你好，你好，你好，
需要效果：你好，你好，你好，你好，你好，你好，你好，你好，
你好，你好，你好，你好，你好，你好，你好.......
已解决
方法如下：
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
.content
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
</style>
</head>
<body>
<div>
你好，你好，你好，你好，你好，你好，你好，你好，
</div>
<div class='content'>
你好，你好，你好，你好，你好，你好，你好，你好，
你好，你好，你好，你好，你好，你好，你好，你好，
</div>
</body>
</html>追问
你这样就是2条信息了 ， 不是第二行了
我需要的是1条信息的第二行
<html>
<head>
<title></title>
<style>
*
margin: 0;
padding: 0;
div
overflow: hidden;
width: 411px;
height: 37px;
div .tmp:after
content: "...";
</style>
</head>
<body>
<div>你好，你好，你好，你好，你好，你好，你好，你好， 你好，你好，你好，你好，你好，你好，你好，你好， <span class="tmp">
</span>
你好，你好，你好，你好，你好，你好，你好，你好，</div>
</body>
</html>本回答被提问者采纳 参考技术B
white-space: initial;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
JS实现表格内容溢出显示省略号
不用css方法
参考技术A 好问题.....但是....css不更好吗？
就目前而言，js实现几率为0....当然你愿意去做是可以的，用width/一个字符的宽度，然后得到的商是这个element的最大字符数量，但是现在的字符有些不等宽，会造成溢出或不够。。。
文本溢出
有些时候，文本会超出一个元素，这通常称为文本溢出，我们使用text-overflow来进行文本溢出的操作，如下：
text-overflow:[ clip | ellipsis | <string> ]1,2
clip 这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断驾为了能在两
个字符过渡处截断，你必须使用一个空字符串值 ('')此为默认值驾
ellipsis 这个关键字的意思是☆用一个省略号 ('□', U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本★驾这个
省略号被添加在内容区域中，因此会减少显示的文本驾如果空间太小到连省略号都容纳不下，那么这个省
略号也会被截断驾
<string> <string>用来表示被截断的文本驾字符串内容将被添加在内容区域中，所以会减少显示出的文本驾如果空
间太小到连省略号都容纳不下，那么这个字符串也会被截断驾
<FULL_PAGE_VALUE> 全局值 inherit | initial | unset
纯手打，求采纳o(^▽^)o 参考技术B 用js截取的方式,substring（）+‘...’
以上是关于css怎么让第二行内容显示不下的时候自动省略号！的主要内容，如果未能解决你的问题，请参考以下文章