Multi line h1 header based on pixel width

Question

I am trying to create a multiline header based on width. Here is an example:

<div class = "col-lg-12">
 <h1> 
  Long title: I am learning html and web design. Also, I love data science. Stephen curry is killing everyone
  <small> by Me</small>
 </h1>
</div>

The code above produces a header that spans beyond the browser's right border. I would like to turn it into multiple lines by specifying width. I tried wrapping <h1> into another div, <div style = "width:50px"><h1>...</h1></div> , but it didn't work. I include the jsfiddle . Help appreciated.

Answer 1

Add word-break: break-all; to your h1 style. Default value is "normal", and it works without breaking words in the middle, of course.

http://jsfiddle.net/55wv853x/3/

About WORD BREAK: http://www.w3schools.com/cssref/css3_pr_word-break.asp

Answer 2

I updated your fiddle. Is this what you have in mind?

jsFiddle

HTML

<div class="col-lg-12 wrap">
    <div class="inner">
        <h1> eruheri uhgui rehguireh giurehg ure hgheriu</h1>
        <p> by Me</p>
    </div>
</div>

CSS

.wrap {
    position: absolute;
    text-align: center;
    display: table;
}
.inner {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}