html - 通过 CSS 强制自动换行

Question

目前 TEST TEST 并排出现。如何将一个向下推到第二行？只能通过 CSS。

<div id="box"><p>TEST TEST</p></div>

#box{
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: red;
    color: white;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

score 30 · Accepted Answer

<html><head>
<style>
#box {    
    width:5px;
    display:table;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style></head>
<body>
<div id="box">TEST TEST</div>
</body>
</html>

score 24 · Accepted Answer

假设您试图让元素始终在一行中显示一个单词，您可以使用 CSSword-spacing属性。

jsFiddle 演示

#box {
    word-spacing: 30000px; 
}

PS - 您可以将此属性设置为一个非常大的值（32767pxonChrome 29.0.1和无限值 on FF23），它的工作方式相同。这样它就不会与容器的宽度耦合。

score 9 · Accepted Answer

设置元素的宽度会自动中断元素内的文本

还有一个打断单词的选项，这可以通过

word-wrap：断词；

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

score 7 · Accepted Answer

我使用这种 CSS 样式：

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

<div style="width: 500px;" class="dont-break-out">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

score 3 · Accepted Answer

我会做这样的事情。

<h4>lorem ipsum 
  <span class="wrap-text">
    dolor site amet
  </span>
</h4>

.wrap-text{
     white-space: pre-line;
}

不知道为什么上述建议之一使用预包装。我认为预线会更好。它将忽略所有空格和制表符，但尊重源代码中的硬返回。

所以在你的代码中，对于你想要换行到第二行的地方，做一个硬返回。

我喜欢放置一个跨度类，因为这样你可以让它响应，只在某些视口大小触发包装。例如：@media（最大宽度：768px）

score 0 · Accepted Answer

您需要设置widthdiv 元素的。然后元素将自动滚动到新行。

#box{
    width:20px; /* or a suitable width*/
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: red;
    color: white;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

但是请注意，高度取决于内容。如果有分配的内容，那么元素高度也会增加。

另一种方法是将父容器的字间距设置为很大，例如，

.parent {
  word-spacing:; 
}

这也会在每个单词之后强制自动换行。

score -4 · Accepted Answer

简单，只需通过 css 进行 TEST<'br />TEST 测试，除非您有两个子容器，一个用于每个“TEST”，否则这是不可能的。

html - 通过 CSS 强制自动换行

7 回答 7

Related

Reference