如何在Bootstrap列中使文本自动换行

Question

我有一个在容器内的行和列。

<div class="container">
    <div class="row">
        <div class="col-md-4" >
            <h1>About</h1>
<p>asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>
        </div>  
    </div>
</div>

当文本到达列的末尾时，我该如何使它换行？

- Otachan

---

一张图片可能会很有帮助。 - Scott Hunter

我贴了一张照片可能会有帮助。 - Otachan

在单词之间加上空格 :) 我的意思是，这只是一个虚构的情况，在没有任何语言中都不存在这样长的单词，甚至包括德语和芬兰语。但URL可能会非常长。 - FelipeAls

Answer 1

使用 word-wrap: break-word

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.break-text p {
  word-wrap: break-word;
}

<div class="container break-text">
  <div class="row">
    <div class="col-xs-4">
      <h1>About</h1>
      <p>asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>
    </div>  
  </div>
</div>

- Mohammad Usman

---

有没有其他更简单的方法？比如使用Bootstrap类？ - Otachan

@Otachan 我认为 Bootstrap 中没有这个类，你需要自定义样式。 - Mohammad Usman

如果您不想让文本包装情况随意，您可以在CSS文件中将word-wrap: break-word;直接添加到p标签上。 - Caleb Anthony

Answer 2

只需在你的CSS中添加即可。

.word-wrap{word-wrap: break-word;}

然后在您的段落中添加class属性。

 <p class="word-wrap">asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>

另一种选择是将其应用于整个网站或所有段落，例如：

body {word-wrap: break-word;}
OR
p{word-wrap: break-word;}

- TFFX

Answer 3

为表格单元格添加样式

td
 { 
    white-space: initial;
 }

- wi7sonjoseph