我知道你可以使用CSS规则的组合,当溢出时间(离开父节点)时,文本以省略号(...)结尾.
是否可以(随意说,不)实现相同的效果,但让文本包裹多行？
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
正如您所看到的,当文本比div的宽度宽时,文本以省略号结尾.但是,仍然有足够的空间让文本换行第二行并继续.这被white-space: nowrap省略,这是省略号工作所必需的.
有任何想法吗？
PS:没有JS解决方案,如果可能的话纯CSS.
小智 91
简单的CSS属性可以做到这一点.以下是三行省略号.
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
amc*_*dnl 32
看看这个纯css版本:http://codepen.io/martinwolf/pen/qlFdp
display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;
das*_*ard 30
我不确定你是否见过这个,但是Chris Coyier出色的CSS-Tricks.com发布了一段时间的链接,它是一个纯粹的CSS解决方案,完全符合你的要求.
<div class="ellipsis">
<div>
<p>
Call me Ishmael. Some years ago – never mind how long precisely – having
little or no money in my purse, and nothing particular to interest me on
shore, I thought I would sail about a little and see the watery part of the
world. It is a way I have of driving off the spleen, and regulating the
circulation. Whenever I find myself growing grim about the mouth; whenever it
is a damp, drizzly November in my soul; whenever I find myself involuntarily
pausing before coffin warehouses, and bringing up the rear of every funeral I
meet; and especially whenever my hypos get such an upper hand of me, that it
requires a strong moral principle to prevent me from deliberately stepping
into the street, and methodically knocking people's hats off – then, I account
it high time to get to sea as soon as I can.
</p>
</div>
</div>
html,body,p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA;
}
.ellipsis:before {
content: "";
float: left;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 3em;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
background: -webkit-gradient(linear,left top,right top,
from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
}
当然,作为一个纯粹的CSS解决方案意味着它也是一个非常复杂的解决方案,但它干净而优雅地工作.我将假设Javascript是不可能的,因为使用Javascript更容易实现(并且可以说更可降级).
作为一个额外的奖励,有一个可下载的完整过程的zip文件(如果你想了解它和所有),还有一个SASS mixin文件,这样你就可以轻松地将它折叠到你的过程中.
希望这可以帮助!
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
小智 11
如果以上不起作用，请使用它
display: -webkit-box;
max-width: 100%;
margin: 0 auto;
-webkit-line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
下面的Css应该可以解决问题.
在第二行之后,文本将包含......
line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
结合两个类看起来更优雅。two-lines如果只有一行需要查看，您可以放弃课程：
.ellipse {
white-space: nowrap;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.two-lines {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
}
.width{
width:100px;
border:1px solid hotpink;
} <span class='width ellipse'>
some texts some texts some texts some texts some texts some texts some texts
</span>
<span class='width ellipse two-lines'>
some texts some texts some texts some texts some texts some texts some texts
</span>