P容器或换行符的宽度

Question

段落断点应该设置为容器的宽度，还是使用br？

示例：

<div  style="width: 30px;">
    <p>
        Foo bar test
    </p>
</div>

或

<p>
    Foo<br>
    bar<br>
    test
</p>

http://jsfiddle.net/APcU3/

我一直认为它应该是通过设置容器的宽度来实现的。但我不是前端，很多HTML模板都使用了BR方法。

Answer 1

这具体取决于你想要实现的目标。如果您试图让单词换行以适应页面上的特定宽度，那么第一个示例是您应该如何处理它(作为一般规则，您应该尝试使用标记而不是标记**来调整布局问题)。

但是，如果存在需要在这些特定位置换行的逻辑原因，则标记方法是合适的(例如，如果您希望确保每个单词都在其自己的行上，而不管单词的长度如何，那么使用<br /> (<br>)就可以了。但是，即使在这些情况下，您也可能希望依赖更有意义的语义标记，除非有真正的逻辑需要专门使用换行符。即：

<p class='thin_column'>
  <span>Foo</span> 
  <span>Bar</span>
  <span>test</span>
</p>

并包括css规则：

.column {width:50px;}
.column span {display:block;}

通过这种方式，您仍然可以使用CSS从根本上调整布局，但您将在每个单词之后强制换行。

Answer 2

永远不要将样式和结构(或本例中的内容)混合在一起！width-method (在css类中使用，而不是内联)是实现这一点的唯一方法。

<br>元素仅用于在特定位置强制换行。但这是与内容相关的，而不是样式问题。