html中冗长的文本换行格式

时间:2011-07-27 09:59:25

标签: html css

标记

<div>
    <label class="form-label-medium">Full Notice Text</label>
    <span id="FullNoticeText">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Vestibulum urna metus, placerat eleifend
        tincidunt at, posuere feugiat risus. Integer posuere commodo
        magna et consectetur. Maecenas laoreet ultricies tempor. 
        Ut turpis dolor, suscipit vitae egestas vitae, euismod a
        lorem. Cras porta malesuada leo ac faucibus.
    </span>
</div>

CSS

div{
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.form-label-medium{
    font-weight: bold;
    display:inline-block;
    width: 150px;
}

这给了我:http://jsfiddle.net/naveen/ujkJ5/这不是我想要的。

问题在于,从第二行开始,我的标签下面会包裹流动的冗长跨度 我想要的是让每一行跨度与标签保持150px的距离,这样所有的行都与Lorem中的L行排成一行。

希望我很清楚。可以做些什么?

1 个答案:

答案 0 :(得分:6)

.form-label-medium设为float: left,然后添加:

#FullNoticeText {
    display: block;
    overflow: hidden    
}

请参阅: http://jsfiddle.net/ujkJ5/8/