通过 CSS 强制自动换行答案

【问题标题】：Force word wrap through CSS通过 CSS 强制自动换行
【发布时间】：2013-09-19 10:03:10
【问题描述】：

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

【问题讨论】：

好吧，一旦您指定了width 的width，这应该会自动发生 - 否则，为什么它不应该在同一行;)
你到底想做什么？
你真的不能那样做。您可以将元素的宽度设置得如此之窄，以至于每行只能容纳一个单词。但这不是在每个单词之后强制换行。
欢呼Feeela，我希望能以某种方式尝试使用“自动换行”。还是谢谢

标签： html css

【解决方案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>

【讨论】：

这会改变div 的宽度。如果这是可以接受的，那么你就不需要其余的了，也不应该使用它。
只需添加例如width: 3em 到问题中的 CSS 规则，TEST TEST 出现在两行中（丑陋，但这就是代码的其他部分所做的）。
你说得对，它有效，我需要进一步探索。但是我所写的到处都在被跟踪。
添加到@Amit 提到的内容：word-break: break-all;

【解决方案2】：

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

jsFiddle Demo

#box {
    word-spacing: 30000px; 
}

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

【讨论】：

这会将包含框的大小推出，这似乎不是 OP 想要的
一个字在另一个字下
@Daft 好的，你看到我的小提琴了吗？它正是这样做的
但是 div 是 30,000 像素宽...我很感激帮助，但这并不是我真正想要的
@Daft 不。 div 不是 30Kpx 宽，而是 100% 的屏幕。这种方法的整个想法是它很灵活。看看这个 200px 宽的例子。 jsfiddle.net/itay1989/DLhwJ/2

【解决方案3】：

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

还有一个分词的选项，这可以用

自动换行：断字；

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

【讨论】：

【解决方案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;

}

&lt;div style="width: 500px;" class="dont-break-out"&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ&lt;/div&gt;

【讨论】：

css-tricks.com/snippets/css/…

【解决方案5】：

我会做这样的事情。

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

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

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

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

我喜欢放置一个 span 类，因为这样你可以让它响应，只在特定的视口大小触发包装。例如：@media (max-width:768px)

【讨论】：

【解决方案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;
}

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

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

.parent {
  word-spacing:; 
}

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

【讨论】：

【解决方案7】：

简单，简单地说测试测试仅通过 css 是不可能的，除非您有两个子容器，一个用于每个“TEST”。

【讨论】：