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

Question

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

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

当我有填充集时,为什么这样做呢？

$('.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 {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

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

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