Question

请查看我的http://jsfiddle.net/ob5rmnk2/7/，您会看到我的段落文本显示在我的div内容之外。

如何更改CSS，以便文本可以自动调整大小以适合我内容的div？我需要内容div来自动调整大小。

如果将屏幕缩小，您会看到文本开始折叠，并且显示的内容超出了我要修复的内容的块高。我希望它始终显示在内容div中。

此外，我该如何制作buttons，以使他们可以始终自动地与上面的段落保持50px的间距（或一些固定的空格）？

Answer 1

我所做的更改：

word-wrap: break-word;

test-inner-right，以便我们中断实际文本（因为我们实际上没有空格）
在两个height: 100px;-test-inner-left`css类中都删除了test-inner-right and。由于固定高度不会使其“自动调整大小”

摘要：

.test-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
}

.test-prompt-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .8;
}

.test-prompt-content {
  position: relative;
  z-index: 5;
  background: yellow;
  padding: 20px 15px;
  margin: 10% auto;
  width: 350px;
  max-width: 100%;
  border: 3px solid blue;
  max-width: 80%;
}

.test-prompt-content-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #3F3F3F;
  text-align: center;
}

.test-prompt-content-buttons {
  margin-bottom: 10px;
  padding-top: 200px;
  text-align: center;
  margin-top: 20px, auto;
}

.test-inner-right {
  padding-right: 10px;
  float: right;
  /*width: 300px;*/
  max-width: 80%;
  word-wrap: break-word;
  text-align: left;
}

.test-inner-left {
  float: left;
  /*width: 10px;*/
  max-width: 10%;
  color: blue;
  text-align: right;
  padding-left: 20px;
}

.test-inner {
  border: 3px solid red;
}

<div class="test-prompt">
  <div class="test-prompt-backdrop"></div>
  <div class="test-prompt-content">
    <div class="test-prompt-content-title">
      <p class="test-1"></p>
      <br /> Title
    </div>

    <div class="test-inner">

      <div class="test-inner-left">
        <p class="test">

        </p>
      </div>
      <div class="test-inner-right">
        <p>
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </p>
        <p>
          bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </p>
      </div>

      <div class="test-prompt-content-buttons">
        <div>
          <button id="continue" type="button">Continue</button>
        </div>
        <br />
        <div>
          <button id="cancel" type="button" class="btn btn-default">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您的单词没有自动换行，因为它只是一个没有空格的单词，如果您想在内部使用word-wrap: break-word; 或者，您可以使用word-break: break-all;取决于您要如何打破它们

Answer 3

尝试在CSS word-break: break-all中使用.test-inner-right，如下所示：

.test-inner-right {
    padding-right: 10px;
    /*width: 300px;*/
    width: 80%;
    height: auto;
    text-align: left;

    word-break: break-all;
}

CSS如何自动调整div的大小以适合内容？

3 个答案: