CODEWITHSUNDEEP
htmlcss
justinw
justinw

Reputation: 3966

Prevent Word Breaks for link - CSS

I have some links that I would like to prevent from being broken up when a wrap is needed. I would rather the whole entire link be moved to another line rather than half of the link.

Here is an example

Is there any way to make a class only break 'full' if a word-break is needed? (meaning that if the content of that class will exceed the lines, instead of breaking it, just create a new line with it).

I hope this makes sense; thank you for your time.

HTML

<div class="box">
    Here is some text within this grey box; <a href="#">And here is the link</a>.
</div>

CSS

.box {
    background: grey;
    color: white;
    line-height: 24px;
    padding: 15px;
    width: 290px;
}
.box a {
    background: aqua;
    color: black;
    padding: 5px;
}

Upvotes: 5

Views: 4996

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240888

You are looking for white-space: nowrap.

Updated Example

.box a {
    white-space: nowrap;
    background: aqua;
    color: black;
    padding: 5px;
}

Upvotes: 10

Related Questions