如果文字太長，則將其換行

Question

我在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;
}

我不知道客戶什么時候寫長文本，什么時候寫短文本。 我想如果文本太大，則將其放在第二行。

我知道我必須降低line-height但是我不知道如何解決當前問題

JSFIDDLE

Answer 1

1）清除overflow:hidden在容器中

2）從h1移除高度

小提琴

Answer 2

我建議您使用white-space:normal而不是word-break: break-all 。 同樣，將.newstitle類的height替換為min-height。

.newstitle {
min-height: 41px;
}

h1 {
white-space:normal;
min-height: 41px; 
}

Answer 3

將line-height設置為一個值，該值可使（至少）兩行適合分配的高度。 在這種情況下，合適的值可能是1.5 。 您還需要修復font: 13px bpg arial; 行，顯然是通過刪除bpg使其起作用。 請注意，如果標題需要的空間多於兩行，您可能仍然會遇到麻煩，但這是一個不同的問題。

如果要在只有一行的情況下使文本垂直居中（問題中未指定，但這似乎是為了設置這么大的行高），則可以將垂直對齊方式設置為middle和（以適用） 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> 

Answer 4

我想你可能會尋找類似word-break 。 只需將max-width或width設置為您想要h1最大化使用的寬度。

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