我有一个包含两行的div.顶行是标题,底线是名称.
但是,当标题很长时,我希望溢出转到第二行并在其旁边显示名称,如右图所示.
有人可以帮我吗？
这是html结构：
<div class="container">
<div class="content_top">
<span class="content">Something</span>
</div>
<div class="name_top">
<span class="name">Steve</span>
</div>
</div>
解决方法
CSS技巧.将名称放在下一行或同一行上
我使用了:first-line伪元素和word-spacing属性.
如果第一行很短,则名称将放在下一行.如果第一行很长,则名称放在同一行.
/* heart of the matter */
.container:first-line {
word-spacing: 240px; /* the width of the container,or more */
}
.content {
word-spacing: normal;
}
.insert {
margin-right: -11px; /* defined by the normal inter-word space */
}
/* nice look */
.container {
border: 5px solid black;
float: left;
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
margin: 0 15px 30px 0;
min-height: 60px;
padding: 8px 10px;
width: 240px;
}
.name {
color: red;
}
/* little explanation */
.colored-background .content { background-color: lightblue; }
.colored-background .insert { background-color: orange; }
<div class="container"> <span class="content">Something</span> <span class="insert"> </span> <span class="name">Steve</span> </div> <div class="container"> <span class="content">Something Something Else</span> <span class="insert"> </span> <span class="name">Steve</span> </div> <div style="clear: left;"></div> <div class="container colored-background"> <span class="content">Something</span> <span class="insert"> </span> <span class="name">Steve</span> </div> <div class="container colored-background"> <span class="content">Something Something Else</span> <span class="insert"> </span> <span class="name">Steve</span> </div>
