Question

我正在使用Bootsrap构建一个站点并完全使用网格系统。我的长篇文章出了问题。

<div class="row">
   <div class="col-md-9">
    LONGTEXTHERELONGTEXTHERELONGTEXTHERE
    </div>
</div>

你看，我不知道真正的宽度大小，所以我不能在那个div中做文字包装。没有固定的宽度尺寸，我不能进行文字包装吗？我试过了：

 word-wrap:break-word;
 white-space:initial;
 white-space:normal;

但这些东西适用于固定宽度尺寸。

Answer 1

这个CSS应该做你需要的：

word-wrap: break-word;

Answer 2

尝试将word-wrap: break-word;与display: table-cell;一起使用。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.col-xs-1 {
  background-color: yellow;
  display: table-cell;
  word-wrap: break-word;
}

<div class="row">
  <div class="col-xs-1">
    LONGTEXTHERELONGTEXTHERELONGTEXTHERE
  </div>
</div>

Answer 3

你的意思是长话，不是吗？（长文本将始终在单词结束处自动中断）

word-wrap: break-word;可以解决问题......

如何在响应式div中进行文本包装？

3 个答案: