为什么内容会溢出栏目？

Question

我正在尝试 bootstrap 列，所以我有一列占据了该行的 8 个部分，第二部分占据了 4 个部分。但是8篇div内容比较多，溢出来了。如何停止这种行为。

.bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>

Answer 1

这是默认行为，因为点没有分隔字符并且被视为单个单词。您可以使用 word-wrap: break-word 在部分文本之后创建一个新行，或者使用 word-break: break-all 来继续文本中的点。

.bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}
.col-md-8.bggreen.border {
  word-wrap: break-word;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>

.bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}
.col-md-8.bggreen.border {
  word-break: break-all;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>

Answer 2

定义一个 class hideOverflow 隐藏溢出，然后 text-overflow 属性到省略号。这样就可以了。

.hideOverflow {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
}
.bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}
.col-md-8.bggreen.border {
  word-break: break-all;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border hideOverflow">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>

Answer 3

自动换行属性打断文本并避免溢出。在您的 css 文件中添加以下样式。

.col-md-8.bggreen.border
{
   word-wrap:break-word;
}

你可以访问这个网站http://www.aubrett.com/InformationTechnology/WebDevelopment/CSS/FailSafeCSS1.aspx

为什么内容会溢出栏目？

Why does the content overflow the column?

html

css

grid-layout

twitter-bootstrap