面板内容溢出到底部-解网

问：

我在第二列中的文本溢出到底行。参考溢出到底部的长地址。

jsFiddle ： http://jsfiddle.net/m1qjbr70/

添加并不能解决问题。"word-wrap:break-word;

<p class="text-primary" style="word-wrap:break-word;">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as</p>

我希望它能像这样动态地把它推下来：

请协助我。谢谢。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <h2>Panel Test</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">
      <div class="col-sm-6 form-group-sm">
        <label class="col-sm-4 form-control-static control-label">Name</label>
        <div class="col-sm-8 form-control-static">
          <p class="text-primary">Abu</p>
        </div>
      </div>

      <div class="col-sm-6 form-group-sm">
        <label class="col-sm-4 form-control-static control-label">Address</label>
        <div class="col-sm-8 form-control-static">
          <p class="text-primary">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as</p>
        </div>
      </div>

      <div class="col-sm-6 form-group-sm">
        <label class="col-sm-4 form-control-static control-label">Email</label>
        <div class="col-sm-8 form-control-static">
          <p class="text-primary">[email protected]</p>
        </div>
      </div>

      <div class="col-sm-6 form-group-sm">
        <label class="col-sm-4 form-control-static control-label">Age</label>
        <div class="col-sm-8 form-control-static">
          <p class="text-primary">19</p>
        </div>
      </div>

      <div class="col-sm-6 form-group-sm">
        <label class="col-sm-4 form-control-static control-label">Phone (M)</label>
        <div class="col-sm-8 form-control-static">
          <p class="text-primary">033172218</p>
        </div>
      </div>

      <div class="col-sm-6 form-group-sm">
        <label class="col-sm-4 form-control-static control-label">Phone (H)</label>
        <div class="col-sm-8 form-control-static">
          <p class="text-primary">4123421</p>
        </div>
      </div>

      <div class="col-sm-6 form-group-sm">
        <label class="col-sm-4 form-control-static control-label">Branch</label>
        <div class="col-sm-8 form-control-static">
          <p class="text-primary">Remote</p>
        </div>
      </div>
    </div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

HTML CSS 特推特引导 3 面板

面板内容溢出到底部

Panel content overflow to bottom

评论