html - 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

这具体取决于您要完成的工作。如果您试图让文字换行以适合页面上的特定宽度，那么第一个示例是您应该如何处理它（作为一般规则，您应该尝试使用css，而不是标记来调整布局问题）。

但是，如果有逻辑原因需要在这些特定位置换行，则该<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方法（用于 css 类而不是内联）是实现此目的的唯一方法。

该<br>元素仅用于在特定位置强制换行。但这是内容依赖而不是样式问题。