我使用了: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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句