Question

我遇到的内容超出了容器的问题。它发生在我的代码的service_description区域。我有垂直和水平填充设置描述。垂直填充不是水平的。

要使描述出来只需单击其中一个框，然后您将看到我所指的内容。我希望所有内容都保留在该框中。

为什么在填充集时会这样做？

＆＃13;

$('.service_wrapper').click(function() {
  var thisDescription = $('.service_description', $(this));
  $('.service_description').not(thisDescription).hide().parent().removeClass('closed');
  thisDescription.slideToggle(500).parent().toggleClass('closed');
});

＆＃13;

.page_wrap {
  margin: 15px 10%
}
.left_service_wrap {
  float: left;
  width: 40%;
  margin-left: 5%;
}
.service_wrapper {
  margin-left: 25%;
  border: 1px solid black;
  margin: 15px 0;
  width: 80%;
}
.service_list {
  margin-left: 20%;
}
.service_title {
  padding: 15px 12px;
  margin: 0;
  font-weight: bold;
  font-size: 1em;
}
.service_title:before {
  content: '';
  background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
  width: 10px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  padding-right: 6px;
}
.closed .service_title:before {
  background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
  background-color: gray;
  color: blue;
  cursor: pointer;
}
.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page_wrap">
  <div class="left_service_wrap">
    <div class="service_list">
      <div class="service_wrapper">
        <div class="service_title">Flooring</div>
        <div class="service_description">The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        </div>
      </div>
      <div class="service_wrapper">
        <div class="service_title">Roofing</div>
        <div class="service_description">Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        </div>
      </div>
    </div>

＆＃13;

Answer 1

您可以将word-wrap添加到.service_description类中，该类应该在到达容器末尾时将字断开到新行上。

.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%; /* Probably should remove this as well */
  margin-top: 10px;
  font-size: .9em;
  word-wrap: break-word;
}

Answer 2

“单词”太长，即比整行更长），但在现实生活中，你永远不会有那么长的单词......

编辑/补充：

在这里：

.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

100％宽度加上2 x 14 px填充（即实际宽度为100％加上28px）。将box-sizing: border-box;添加到该规则以在宽度中包含填充。

Answer 3

使用：

.service_wrapper { overflow:hidden; }

我希望这会有所帮助。

Answer 4

将word-wrap和box-sizing添加到.service_decription：

.service_description {
        box-sizing: border-box;
        word-wrap: break-word;
        display: none;
        font-size: 0.9em;
        margin-top: 10px;
        padding: 8px 14px;
        width: 100%;
      }

 $('.service_wrapper').click(function() {
      var thisDescription = $('.service_description', $(this));
      $('.service_description').not(thisDescription).hide().parent().removeClass('closed');
      thisDescription.slideToggle(500).parent().toggleClass('closed');
    });

    .page_wrap {
      margin: 15px 10%
    }
    .left_service_wrap {
      float: left;
      width: 40%;
      margin-left: 5%;
    }
    .service_wrapper {
      margin-left: 25%;
      border: 1px solid black;
      margin: 15px 0;
      width: 80%;
    }
    .service_list {
      margin-left: 20%;
    }
    .service_title {
      padding: 15px 12px;
      margin: 0;
      font-weight: bold;
      font-size: 1em;
    }
    .service_title:before {
      content: '';
      background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
      width: 10px;
      height: 10px;
      display: inline-block;
      vertical-align: middle;
      padding-right: 6px;
    }
    .closed .service_title:before {
      background-image: url('http://i.stack.imgur.com/ma4L4.png');
    }
    .service_title:hover {
      background-color: gray;
      color: blue;
      cursor: pointer;
    }
    .service_description {
        box-sizing: border-box;
        word-wrap: break-word;
        display: none;
        font-size: 0.9em;
        margin-top: 10px;
        padding: 8px 14px;
        width: 100%;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page_wrap">
      <div class="left_service_wrap">
        <div class="service_list">
          <div class="service_wrapper">
            <div class="service_title">Flooring</div>
            <div class="service_description">The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
              ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
          </div>
          <div class="service_wrapper">
            <div class="service_title">Roofing</div>
            <div class="service_description">Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
              ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
          </div>
        </div>

添加填充后内容将从容器中移出

4 个答案: