Question

我使用自定义CSS创建了一个包含9列的行，为每列提供了11.11％的宽度，这使得9列相等。

现在我将这个自定义列类应用于一行中的数据：

＆＃13;

.custom-column {
  width: 11.11%!important;
  float: left;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-12">
  <div class="custom-column">
    <p>First Column</p>
  </div>
  <div class="custom-column">
    <p>Second Column</p>
  </div>
  <div class="custom-column">
    <p>Third Column(Text is getting extended)</p>
  </div>
  <div class="custom-column">
    <p>Fourth Column</p>
  </div>
  <div class="custom-column">
    <p>Fifth Column</p>
  </div>
  <div class="custom-column">
    <p>Sixth Column</p>
  </div>
  <div class="custom-column">
    <p>Seventh Column</p>
  </div>
  <div class="custom-column">
    <p>Eigth Column</p>
  </div>
  <div class="custom-column">
    <p>Ninth Column</p>
  </div>
</div>

＆＃13;

如果每列中的文字都是一个简单的小词，那么一切都很好。但是如果有大文本，则列中的文本会在其他列的文本上重叠。

我的专栏中的文字每次都有所不同。我试图从服务器获取文本，所以有时我可能会得到大文本。

我该如何处理？

即使文字变大，有没有办法可以处理9个相等的列？或者还有其他替代方法吗？

我甚至搜索过这个问题，但无法得到确切的结果。

提前致谢：）

Answer 1

只需使用以下CSS来解决此问题

.custom-column {
    float: left;
    width: 11.11% !important;
    word-wrap: break-word;
}

Answer 2

您还可以添加word-wrap: break-word和一些padding

.custom-column {
  width: 11.11%;
  float: left;
  word-wrap: break-word;
  padding: 3px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-12">
  <div class="custom-column">
    <p>First Column</p>
  </div>
  <div class="custom-column">
    <p>Second Column</p>
  </div>
  <div class="custom-column">
    <p>Third Column(Text is getting extended)</p>
  </div>
  <div class="custom-column">
    <p>Fourth Column</p>
  </div>
  <div class="custom-column">
    <p>Fifth Column</p>
  </div>
  <div class="custom-column">
    <p>Sixth Column</p>
  </div>
  <div class="custom-column">
    <p>Seventh Column</p>
  </div>
  <div class="custom-column">
    <p>Eigth Column</p>
  </div>
  <div class="custom-column">
    <p>Ninth Column</p>
  </div>
</div>

Answer 3

尝试使用响应表。希望这能解决你的问题。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
        <div class="row">
        <div class="col-md-9">
          <table class="table">
            <tr>
              <td>First Column</td>
              <td>Second Column</td>
              <td>Third Column (Text is getting extended)</td>
              <td>Fourth Column</td>
              <td>Fifth Column</td>
              <td>Sixth Column</td>
              <td>Seventh Column</td>
              <td>Eigth Column</td>
              <td>Ninth Column</td>
           </tr>
         </table>
      </div>
      </div>

＆＃13;

Answer 4

这是使用自定义css的最佳方式：

＆＃13;

.custom-row {
margin-right: -2px;
margin-left: -2px;
}
.custom-column {
width: 11.11111111%;
padding-right: 2px;
padding-left: 2px;
float:left;
word-wrap: break-word;
box-sizing: border-box;
}

＆＃13;

<div class="custom-row">
    <div class="custom-column">
      <p>First Column</p>
    </div>
    <div class="custom-column">
    <p>Second Column</p>
    </div>
    <div class="custom-column">
    <p>Third Column(Text is getting extended)</p>
    </div>
    <div class="custom-column">
    <p>Fourth Column</p>
    </div>
    <div class="custom-column">
    <p>Fifth Column</p>
    </div>
    <div class="custom-column">
    <p>Sixth Column</p>
    </div>
    <div class="custom-column">
    <p>Seventh Column</p>
    </div>
    <div class="custom-column">
    <p>Eigth Column</p>
    </div>
    <div class="custom-column">
    <p>Ninth Column</p>
    </div>
    </div>

＆＃13;

如何创建一个包含9列的行而不使用bootstrap使数据溢出？

4 个答案: