Question

我有一个动态宽度变化的div。在div中，我想显示一个段落，但我的段落不断脱离div。我该如何解决这个问题？

<div class="wrapper">
    <div class="session session_1">
    </div>
    <div class="session session_2">
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>
</div>

CSS代码：

div.wrapper {
    width: 90%;
    background: black;
}
div.session {
    display: inline-block;
    vertical-align: top;
}

div.session_1 {
    width: 60%;
    height: 100px;
    background: green;
}
div.session_2 {
    width: 30%;
    height: 100px;
    background: red;
}

fiddle

Answer 1

你可以这样试试

＆＃13;

div.wrapper {
  width: 90%;
  background: black;
}
div.session {
  display: inline-block;
  vertical-align: top;
}
div.session_1 {
  width: 60%;
  height: 100px;
  background: green;
}
div.session_2 {
  width: 30%;
  height: 100px;
  background: red;
  word-break: break-all;
  word-wrap: break-word;
}

＆＃13;

<div class="wrapper">
  <div class="session session_1">
  </div>
  <div class="session session_2">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  </div>
</div>

＆＃13;

Answer 2

在您的CSS上，包含您的段落的<div>（.session_2），添加word-wrap: break-word;

示例（基于小提琴）：

div.session_2 {
    width: 30%;
    height: 100px;
    background: red;
    word-wrap: break-word;
}

Answer 3

将css更改为

div.session_2 {

height: 100px;
background: red;
overflow-x:auto;
}

http://jsfiddle.net/TJGZU/259/

在div中显示段落内容

3 个答案: