Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force text over 2 lines with CSS

Tags:

html

css

I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?

HTML:

<div class="test">
    <h1>Mike S</h1>
</div>

<div class="test">
    <h1>Mike Smith</h1>
</div>

<div class="test">
    <h1>Mike Smiths</h1>
</div>

CSS:

.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}

http://jsfiddle.net/zcg9k5xh/

like image 423
michaelmcgurk Avatar asked Feb 02 '15 07:02

michaelmcgurk


1 Answers

Update your code with this:

.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}
<div class="test">
    <h1>Mike <span>S</span></h1>
</div>

<div class="test">
    <h1>Mike <span>Smith</span></h1>
</div>

<div class="test">
    <h1>Mike <span>Smiths</span></h1>
</div>

You can also do this by using css, update above css

h1 span{display: list-item;list-style:none;}

jsfiddle with this http://jsfiddle.net/zcg9k5xh/2/

like image 55
Swapnil Motewar Avatar answered Oct 13 '22 00:10

Swapnil Motewar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!