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移除高度

<强> FIDDLE

Answer 2

我建议您使用white-space:normal代替word-break: break-all。另外，将高度替换为.newstitle类的最小高度。

.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

如果文本太长，请在第二行中换行

4 个答案: