css怎么让第二行内容显示不下的时候自动省略号！

css怎么让第二行内容显示不下的时候自动省略号！
原：你好，你好，你好，你好，你好，你好，你好，你好，
你好，你好，你好，你好，你好，你好，你好，你好，
你好，你好，你好，你好，你好，你好，你好，你好，

需要效果：你好，你好，你好，你好，你好，你好，你好，你好，
你好，你好，你好，你好，你好，你好，你好.......

举报该问题

推荐答案 æ¨èäº2018-03-29

å·²è§£å³
æ¹æ³å¦ä¸ï¼
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

温馨提示：答案为网友推荐，仅供参考

当前网址：http://00.wendadaohang.com/zd/jTjBDTT0Ze00TZ00ej.html

其他回答

第1个回答推荐于2017-11-21

<!DOCTYPE html>
<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条信息的第二行

追答<!DOCTYPE HTML>
<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>

本回答被提问者采纳

第2个回答 2018-03-29

white-space: initial;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

相似回答

CSS如何实现单行和多行文本溢出显示省略号答：实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp...

如何用css使文本溢出边界显示为省略号答：比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；这里注意几点：height高度真好是line-height的3倍；结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；要支持IE8...

css里面怎么让文字长的时候两行显示,最多两行,多余的省略号显示,最重要...答：1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入css代码：div{ width: 100px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;} 3、浏览器运行index.html页面，此时文字超过2行会自动把多余...

css换行显示省略号答：需要三步实现：① white-space：nowrap；// 不允许换行 ② text-overflow：ellipsis；// 溢出的文字用省略号表示 ③ overflow：hidden； // 多出的部分遮盖掉

大家正在搜

css怎么让文字在图片上显示让字显示在图片下方css css让img居中显示 css让图片居中显示 css让图片重复显示 css让图片横着显示网页制作css怎么让图片居中 css怎么让文字在一排 css让文字从左到右依次显示