Question

How can I break a line in css or html for a button link after the first word. So example:

Our Story <- Without line Break

Our
Story <- With line break

This inside a link that is tied to a class in my css file that gives it its pretty button look. There are 5 buttons in a row and all need to have this. I have tried using padding and a <br/> but just dont work at all.

<a href="story.php" class="button_nav"/>Our Story</a>

Answer 1

Use <br> to add a line break (example):

<a href="story.php" class="button_nav">Our<br>Story</a>

An alternate and suggested solution would be to wrap the first word in a <span> and style it with CSS (example):

<a href="story.php" class="button_nav"><span>Our</span> Story</a>

a.button_nav {
    display:inline-block;
    text-align:center;
}
span {
    display:block;
}