CODEWITHSUNDEEP
htmlcssword-wrap
illogicalapple
illogicalapple

Reputation: 773

Remove separator if line break

problem

How do I remove a bullet point • when there is a line break? For example,

abc • defg

has the bullet point while

abc
defg

doesn't? Here's what's happening:

<textarea readonly cols="50" rows="5">big fat long line &bull; longer line haha whoopsie</textarea>
<textarea readonly cols="20" rows="5">big fat long line &bull; longer line haha whoopsie</textarea>

Upvotes: 1

Views: 777

Answers (1)

A Haworth
A Haworth

Reputation: 36566

Although you show the bullets as being part of the text to achieve this in CSS you will need some structure to the text. In particular so the system knows to break at the bullet points not after any convenient word.

This snippet forms the text into an unordered list with each list item set as an inline-block but the 'normal' bullet point before such an item restored with a before pseudo element. The first bullet points on each line are overwritten by a before pseudo element on the ul element.

Try the snippet in full page and then gradually reduce the window size.

ul {
  position: relative;
  box-sizing: border-box;
  padding: 0;
}

ul:before {
  content: '\00a0 \2022 \000a0 ';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  background: white;
  color: transparent;
  z-index: 1;
}

li {
  display: inline-block;
}

li:before {
  content: '\00a0 \2022 \000a0 ';
  display: inline-block;
}
<ul>
  <li>Some text</li>
  <li>Some text of a different length</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Upvotes: 2

Related Questions