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;
}

Answer 1

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

Answer 2

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

jsFiddle Demo

#box {
    word-spacing: 30000px; 
}

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

Answer 3

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

还可以选择打破一个单词，这可以通过

完成

自动换行：break-word;

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

Answer 4

我使用这种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>

Answer 5

我会做这样的事情。

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

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

不确定为何上述建议之一使用预包装。我认为前线会更好。它将忽略所有空格和制表符，但在源代码中尊重硬回车。

因此，在您的代码中，对于要包装到第二行的地方，请进行强制返回。

我喜欢放一个span类是因为这样你可以使它响应，只触发某些视口大小的包装。例如：@media（max-width：768px）

Answer 6

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

#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;
}

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

而且，alernative方法是将父容器的单词间距设置为较高的数量，例如，

.parent {
  word-spacing:; 
}

这也将强制每个单词后的自动换行。

Answer 7

简单，简单地说测试＆lt;'br /＆gt; TEST 只有通过CSS才有可能，除非你有两个子容器，每个“TEST”一个。

通过CSS强制自动换行

7 个答案: