1

I have made this on h1

h1 {
 font: 13px bpg arial;
 color: #fff;
 text-shadow: 0 1px 0 rgba(0,0,0,.15);
 line-height: 41px;
 width: 476px;
 padding: 0 5px;
 height: 41px;
}

I don't know when client will write long text and when short. I want that if there's too big text it's make it on second line.

I know that I must reduce line-height but I don't know how to this on current problem

JSFIDDLE

Mihey Egoroff
  • 1,542
  • 14
  • 23
  • in your demo you have set a width and height and set overflow to hidden for the parent of the H1 tag. You'd need to remove that to see extra content – atmd Dec 16 '14 at 11:56
  • Possible duplicate: http://stackoverflow.com/questions/856307/wordwrap-a-very-long-string – Playmaker Dec 16 '14 at 11:57
  • 1
    There are the content and it's wraped, you just not see is because of line height. If you add more height it, you can see: http://jsfiddle.net/f31vo3g4/5/ – vaso123 Dec 16 '14 at 11:57
  • Simply add ' word-break: break-word; ' to your css & remove the 'overflow: hidden' – Playmaker Dec 16 '14 at 11:59

4 Answers4

0

1) Remove overflow:hidden from container

2) Remove height from h1

FIDDLE

Danield
  • 121,619
  • 37
  • 226
  • 255
0

I would suggest you to use white-space:normal instead of word-break: break-all. also, replace height to min-height for .newstitle class.

.newstitle {
min-height: 41px;
}

h1 {
white-space:normal;
min-height: 41px; 
}
Shreyo
  • 1
0

Set line-height to a value that lets (at least) two lines fit into the allocated height. A suitable value might be 1.5 in this case. You also need to fix the font: 13px bpg arial; line, apparently by removing bpg to make it work. Note that you may still run into trouble if a heading requires more space that two lines, but that’s a different issue.

If you want the text to be vertically centered when there is just one line (this was not specified in the question but this seems to be intent of setting such a large line height), you can e.g. set vertical alignment to middle and (to make that apply) display: table-cell.

.newstitle {
width: 486px;
height: 41px;
overflow: hidden;
background: #0a70a5;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #0a70a5 0%, #006092 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a70a5), color-stop(100%,#006092));
background: -webkit-linear-gradient(top, #0a70a5 0%,#006092 100%);
background: -o-linear-gradient(top, #0a70a5 0%,#006092 100%);
background: -ms-linear-gradient(top, #0a70a5 0%,#006092 100%);
background: linear-gradient(to bottom, #0a70a5 0%,#006092 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a70a5', endColorstr='#006092',GradientType=0 );
}

* {
margin: 0;
padding: 0;
outline: none;
position: relative;
}

h1 {
font: 13px arial;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
line-height: 1.5;
width: 476px;
padding: 0 5px;
height: 41px;
vertical-align: middle;
display: table-cell;
}
<div class="news">
<div class="newstitle" style="line-height: 20px;">
 <h1>bla bla bla fcking bla bla blaa more bla bla bla and more bla bla bla second bla bla bla fcking bla bla blaa more bla bla bla and more bla bla bla</h1></div>
</div>
And then an example with a short text:
<div class="news">
<div class="newstitle" style="line-height: 20px;">
 <h1>White Christmas expected!</h1></div>
</div>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
-1

I think you might be looking for something like word-break. Just set the max-width or width to the width you want the h1 to maximally use.

h1 {
    font: 13px bpg arial;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    line-height: 41px;
    width: 46px;
    padding: 0 5px;
    min-height: 41px;
    word-break: break-all;
}

JSFiddle

Rvervuurt
  • 8,589
  • 8
  • 39
  • 62