Question

我正在尝试自举列，所以我有一个占据该行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继续创建带有文本的点。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

您可以访问此网站http://www.aubrett.com/InformationTechnology/WebDevelopment/CSS/FailSafeCSS1.aspx

Answer 3

定义一个隐藏溢出的类hideOverflow，然后将文本溢出属性定义为省略号。这样就可以了。

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

为什么内容溢出列？

3 个答案: