要实现这么一个需求:
备注: 后面的值有可能超出一行,产品不让在一行省略号显示,而是要在下一行显示,而第二行的内容要和第一行垂直方向对齐。
用flex布局就可以很容易搞定这个需求。代码如下:
<style type="text/css">
.bg{
width: 300px;
height: 200px;
background-color: gray;
margin: 0 auto;
display: flex;
}
.valueCls{
flex: 1;
word-break: break-all
}
</style>
<div class="bg">
<span>备注:</span>
<span class="valueCls">aaaddddddddddddddddddddaaaaaaaaaa</span>
</div>
flex布局, 备注: 和后面的值分为两个子项,后面的这个值子项设置flex: 1 表示占满第一个子项剩余的空间,而word-break 则表示超出换行显示。注意在换行显示的时候,第二个子项不会占用第一个子项的空间。