Reply To: Remove the comma (,) in the line break.

• vipstephan

• September 14, 2020 at 6:13 am

Oh, I see. Well, technically it’s not possible to determine when a line break occurs because that depends on the viewport width, and that’s variable, depending on the user’s preference or the display size. But you can work around this with some CSS trickery:

Assuming the tags are output as list like this:

<ul>
	<li>Upbeats</li>
	<li>Keyboards</li>
	<li>Positive</li>
	<li>Useful</li>
</ul>

You can use this CSS to make it look as you want:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}
li {
	position: relative;
	display: inline-block;
	margin-right: .5em;
}
li:before {
	content: '';
	width: .25em;
	height: .25em;
	position: absolute;
	background-color: blue;
	border-radius: 100%;
	left: -.5em;
	top: 50%;
	transform: translateY(-50%);
}

Basically what this does is add the bullet points to the list items as generated content (:before pseudo-element). By positioning them absolutely, they are taken out of the natural flow of content, so they are out of the boundaries of the list container at the start of each line. And the overflow: hidden on the list container makes them disappear, for that matter.