8

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

Is there a way to do this with CSS or Javascript?

Thanks for your help.

Tom Brock
  • 920
  • 7
  • 29

1 Answers1

14

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • +1 You could fix that space between each word and the successive comma by applying a negative left margin to your `span::before`. – gyre Dec 10 '16 at 22:32
  • @gyre Yes, but the exact amount of margin could vary. This is the [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630) issue. – Oriol Dec 10 '16 at 22:35
  • Interesting, but you have to use a border to hide the first comma. Thanks for your effort. – Tom Brock Dec 11 '16 at 08:50
  • @TomBrock You can remove the border, what hides the commas is `overflow: hidden` – Oriol Dec 11 '16 at 16:13
  • @Oriol I have a comma appearing before each word (including the first one) if I remove the border. Strange! – Tom Brock Dec 11 '16 at 17:09