样式跨越成多条线

Question

这是我的html:

<div class="Item-Text>
     does not contain: <span class="Item-Props">fdsf sdfds f</span>
     , <span class="Item-Props">is</span>
     , <span class="Item-Props">is not</span>
     , <span class="Item-Props">contains</span>
     , <span class="Item-Props">does not contain</span>
     , <span class="Item-Props">Entry</span> 
</div>

的例子:http://jsfiddle.net/mato75/Labor4az/3/

但是我希望它有一个最大宽度并且它将以多行呈现

Answer 1

用Item-Props替换class

.Item-Props {
    color: red;display:block;
}

Answer 2

.Item-Text { max-width:150px; }

Answer 3

使用<ul>

<div class="Item-Text">does not contain:
    <ul style="list-style-type:none;">
        <li class="Item-Props">fdsf sdfds f,</li>
        <li class="Item-Props">is,</li>
        <li class="Item-Props">is not,</li>
        <li class="Item-Props">contains,</li>
        <li class="Item-Props">does not contain,</li>
        <li class="Item-Props">Entry,</li>
    </ul>
</div>