在换行符时如何隐藏分隔符? [英] How to hide separator when at newline?
本文介绍了在换行符时如何隐藏分隔符?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我认为这是最容易用示例解释的情况.
I think this is easiest to explain with an example.
假设我在这样的网页上有一个列表:
Let's say I have a list on a webpage like this:
word one, word two, word three, word four, word five, word six
如果用户的屏幕分辨率较小,则列表可能最终像这样包装:
If the user has a small screen resolution, the list may end up wrapping like this:
word one, word two, word three, word four, word five,
word six
如您所见,第一行末尾有一个逗号.我想更改它,以便在发生这种情况时将逗号隐藏起来.这意味着它看起来像这样:
As you can see, there is a comma at the end of the first line. I would like to change it so if something like this occurs, the comma is hidden. That means it would look like this:
word one, word two, word three, word four, word five
word six
是否可以使用CSS或Javascript做到这一点?
Is there a way to do this with CSS or Javascript?
感谢您的帮助.
推荐答案
是.只需让它们以负边距溢出,然后隐藏溢出即可.
Yes. Just let them overflow with negative margins, and hide the overflow.
div {
border: 1px solid;
overflow: hidden;
animation: size 5s linear infinite alternate;
}
span {
display: inline-block;
margin-right: 10px;
}
span::before {
content: ',';
display: inline-block;
width: 10px;
margin-left: -10px;
}
@keyframes size {
from { width: 750px; }
to { width: 0; }
}
<div>
<span>word one</span>
<span>word two</span>
<span>word three</span>
<span>word four</span>
<span>word five</span>
<span>word six</span>
</div>
这篇关于在换行符时如何隐藏分隔符?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文