CODEWITHSUNDEEP
htmlcsswordpresswhitespace
Pepe Silvia
Pepe Silvia

Reputation: 103

How to stop multi-word links being placed together on a new line, instead splitting them up like regular text?

I have a site powered by Wordpress, and on one of my posts I have the following text.

Any readers interested in the different ways to interpret utils are encouraged to read about the difference between Ordinal and Cardinal Utility.

If Wordpress can't put all of the text "Ordinal and Cardinal Utility" on the same line as "between" it puts it all on a completely new line, which can look really clunky, especially on mobile. Because it's a hyperlink it's prioritising keeping it as one item whereas I'm happy for the words to be split over multiple lines, just as it would if it wasn't a hyperlink. I know this is a basic problem but for some reason I haven't found any solutions online. Is there an easy way to fix this?

Upvotes: 0

Views: 663

Answers (1)

Xhynk
Xhynk

Reputation: 13860

The CSS property you're looking for is either white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element is an inline display, which allows the text to wrap.

Here are a few examples:

div {
  width: 200px;
  background: #e4e6e9;
  padding: 10px;
  margin: 10px;
}

a {
  background: #0094ee;
  color: #fff;
  text-decoration: none;
}

.ib {
  display: inline-block;
}

.ws-nw {
  white-space: nowrap;
}
<div id="a">
  Usually, <a href="#">links are "inline" which means they wrap around once they hit</a> the side of the container.
</div>

<div id="b">
  You can have them <a href="#" class="ib"> set to inline-block to prevent broken wrapping</a>, but the text still wraps. inside the block
</div>

<div id="c">
  You can avoid <a href="#" class="ws-nw">any wrapping at all by setting</a> it to white-space: nowrap;. Be careful on <a href="#" class="ws-nw">super long text though because it can cause unexpected results on small containers</a>.
</div>

Upvotes: 2

Related Questions