CSS：防止单个符号换行

Question

I'm presenting a long list of links wrapped in a div with middle dots separating each item (specifically, [space]·[space] between each link). Occasionally, a dot appears at the beginning of a line, as shown here:

link · link · link · link · link · link · link · link · link · link · link · 
link · link · link · link · link · link · link · link · link · link · link · 
· link · link · link · link · link · link · link  · link  · link  · link  · link

Is there a way to prevent this? I've tried various white-space property values. Right now, each link is wrapped inside a <span> tag that uses whiite-space: pre-wrap; in its class, which so far has given the best results (ie, the fewest wrapped dots).

Alternatively, if there's a better way to display such a list, I'm open the suggestions.

Answer 1

Assuming that all your links have link text, you need the dot to stay on the same line as the preceding link.

A simple fix is to use a non-breaking space in your mark-up:

<a href="">link</a>&nbsp;&midot;

or use pseudo elements:

 a:after { content:'\\A0\\B7'; /* Hex codes for nbsp and midot */ } 

 <a href"">link</a><a href"">link</a><a href"">link</a><a href"">link</a> 

Answer 2

You could add the "dot" using pseudo content. Using an :after selector, it would never fall to the next line alone...

 #wrapper { width: 150px; } #wrapper span:after { content: "."; padding: 0 5px; } 

 <div id="wrapper"> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> <span>link</span> </div>