当浏览器窗口大小基于纯css更改时，在跨度中显示点
当浏览器窗口大小基于纯css更改时，在跨度中显示点
提问于 2018-07-15 06:57:59
我想在span元素中显示最多两行的文本。
例如，浏览器窗口的完整尺寸：
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.例如，当浏览器窗口宽度变小时：
Lorem Ipsum is simply dummy text
of the printing and typesetting…如果需要两行以上的时间来显示文本，我希望向客户端显示三个点。我试图找到一些基于纯CSS的解决方案。我试过使用
.truncate {
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}但它不适用于浏览器窗口的动态大小变化。我也有一个想法，用textarea替换span，但它在我的例子中也不起作用。我相信这一定是微不足道的，但经过几个小时的研究，我在网上找不到任何有意义的解决方案。请记住，“span”元素是侧栏部分的一个子元素。如果我对它做了一些更改，我不希望它对其他元素的大小等属性的更改产生影响。有没有什么方法可以不使用任何javascript库就能实现我想要的东西？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-29 07:00:25
我已经创建了自己的实现https://codepen.io/mpiwowarski/pen/qybrqY：示例html代码：
<table>
<tr>
<td>
<div class="ellipsis">
<span>
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.
</span>
<div>
</td>
<td style="width:70%">
</td>
</tr>
</table>css：
.ellipsis {
overflow: hidden;
height: 50px;
line-height: 25px;
}
.ellipsis:before {
content: "";
float: left;
width: 5px;
height: 50px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
background: #AFF; }
.ellipsis:after {
content: "...";
float: right;
position: relative;
top: -25px;
left: 100%;
width: 100px;
margin-left: -100px;
padding-right: 5px;
background: white;
}Stack Overflow用户
发布于 2018-07-15 07:30:37
尝试如下所示：
span::after {
content: "Lorem Ipsum is simply dummy text of the printing and
typesetting industry blah blah blah...";
}
@media screen and (max-width:600px){
span::after {
content: "Lorem Ipsum is simply dummy text";
}
}一定要设置你的中断点！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51344012
复制相关文章
相似问题