本文介绍了文本溢出省略号在两行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道你可以使用CSS规则的组合来使文本以省略号（...）结束，当它溢出时（超出父级的边界）。
。
div {
width：300px;
height：42px;
overflow：hidden;
text-overflow：ellipsis;
white-space：nowrap;
}
正如你所看到的，文本以省略号结束， div的宽度。但是，仍然有足够的空间让文本包装在第二行并继续。这被 white-space：nowrap 打断，这是省略号工作所必需的。
任何想法？
PS：没有JS解决方案，尽可能使用纯CSS。
解决方案
我不确定您是否已看过
HTML：
< div class =ellipsis>
< div>
< p>
叫我以实玛利。几年前 - 不介意多久准确 - 有
一点钱或没有钱在我的钱包，没有什么特别感兴趣我在
岸，我想我会航行一点，看到水样的部分
世界。这是一种我开除脾脏，调节
循环的方式。每当我发现自己越来越严重的嘴巴;每当它
是一个潮湿，drizzly 11月在我的灵魂;每当我发现自己非自愿地
暂停在棺材仓库之前，并带来每个葬礼的后方I
满足;特别是每当我的hypos得到这样一个我的手，它
需要一个强大的道德原则，以防止我故意踏入
到街上，有条不紊地敲人耳的帽子 - 然后，我帐户
它的高时间，以尽快去海。
< / p>
< / div>
< / div>
CSS：
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图像，渐变为IE9。透明的0％ - >白色在50％ - >白色在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 +瓦努阿图+ 5NL5gPOeb / sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8 / qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv + j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC）;
背景：-webkit梯度（线性，左上，右上，从（RGBA（255,255,255,0）），至（白色），彩色停止（50％，白色）$ B $二）;
background：-moz-linear-gradient（to right，rgba（255,255,255,0），white 50％，white）;
background：-o-linear-gradient（向右，rgba（255,255,255,0），白色50％，白色）;
background：-ms-linear-gradient（向右，rgba（255,255,255,0），白色50％，白色）;
background：linear-gradient（to right，rgba（255,255,255,0），white 50％，white）;
}
当然，作为一个纯CSS的解决方案意味着，它也是一个相当复杂的，但它工作干净，优雅。我将假设Javascript是出了问题，因为这是更容易实现（可以说更可降解）与Javascript。
作为额外的奖励，有一个的（如果你想了解它和所有），而且还有一个SASS mixin文件，以便你可以将它折叠到你的进程容易peasy。
希望这有帮助！
I know you can use a combination of CSS rules to make text end with ellipsis (...) when it's time to overflow (get out of parent's bounds).
Is it possible (feel free to just say, no) to achieve the same effect, but let the text wrap on more than one line?
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
As you can see, the text ends with ellipsis when it goes wider than the div's width. However, there is still enough space for the text to wrap on a second line and go on. This is interrupted by white-space: nowrap, which is required for the ellipsis to work.
Any ideas?
P.S.: No JS solutions, pure CSS if possible.
解决方案
I'm not sure if you have seen THIS, but Chris Coyier's excellent CSS-Tricks.com posted a link to this a while back and it's a pure CSS solution that accomplishes exactly what you seek.
HTML:
<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>
CSS:
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);
}
Of course, being a pure CSS solution means that it's also a pretty complicated one, but it works cleanly and elegantly. I will assume that Javascript is out of the question because this is much easier to achieve (and arguably more degradable) with Javascript.
As an added bonus, there's a downloadable zip file of the complete process (if you want to understand it and all), but also a SASS mixin file so that you can fold it into your process easy-peasy.
Hope this helps!
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
这篇关于文本溢出省略号在两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！