HTML样式 - 文本需要更少的行

时间:2013-10-29 14:54:21

标签: html css

我有一些带有很长标签的HTML。问题是标签看起来像这样:

this is a message
that is very very 
very long.. and is 
spanning multiple 
lines..:

我希望它看起来像这样:

 this is a message that is very very very 
 long.. and is spanning multiple lines..:

这是我的代码

<ul>
    <li class="left">
        <LABEL for="field_1">this is a message that is very very very long.. and is spanning multiple lines..:</LABEL>                              
    </li>
    <li>
        <input  id="field_1"  name="field_1" type="checkbox" value="1" /> 
    </li>                       

</ul>

1 个答案:

答案 0 :(得分:3)

使用此CSS:

label {
    display: inline-block;
    width: 300px;
}

HTML

<ul>
    <li class="left">
        <input  id="field_1"  name="field_1" type="checkbox" value="1" /> 
        <LABEL for="field_1">this is a message that is very very very long.. and is spanning multiple lines..:</LABEL>                              
    </li>                       
</ul>

您可以根据需要调整max-width属性。

演示:http://jsfiddle.net/vbdmP/