div+css怎么样控制文本两行显示多余的行数隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div+css怎么样控制文本两行显示多余的行数隐藏相关的知识，希望对你有一定的参考价值。
参考技术A <!DOCTYPEhtml
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;charset=UTF-8">
<style
type="text/css">
.text
height:
40px;
overflow:
hidden;
width:
300px;
word-wrap:
break-word;
</style>
</head>
<body>
<div
class="text">
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
only
two
</div>
</body>
</html>
问题说明:
首先把高度固定了，然后使用overfow：hidden;
把超出部分隐藏，效果请运行代码查看
微信小程序-控制文本只显示若干行多余隐藏
效果图
显示三行的效果图
代码
<text class=intro_info>item.introduction</text>
/*设置text显示行数，多余的省略*/
.intro_info
display: box;
box-orient: vertical;
line-clamp:3;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
margin-top: 10rpx;
line-height: 29rpx;
font-size: 26rpx;
color: darkgray;
以上是关于div+css怎么样控制文本两行显示多余的行数隐藏的主要内容，如果未能解决你的问题，请参考以下文章
如果兄弟 div 中的行超过 n 行，则隐藏显示更多/更少 div