Question

以下是我的问题http://codepen.io/anon/pen/aNWEvQ的代码。

HTML：

<div class="dialog-wrapper">
  <div class="dialog">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  </div>
</div>

CSS：

* {
  box-sizing: border-box;
}

.dialog-wrapper {
  border: 1px solid red;
  position: absolute;
}

.dialog {
  min-width: 50px;
  max-width: 80%;

  border: 1px solid green;
  margin: auto;
}

p {
  border: 1px solid blue;
  font-size: 16px;
  font-family: Arial;
}

为什么p标签没有扩展到文本的宽度并强制.dialog和.dialog-wrapper也要扩展？

是否有CSS可以按照我的意愿扩展段落？

Answer 1

更改.dialog {max-width：100％; } 他们都会扩大。

Answer 2

试试这个：

.dialog-wrapper {
  display: table;
  // add other properties
}

.dialog {
  display: table-cell;
  // add other properties
}

p {
  display: table-cell;
 // add other properties
}

现在，父容器dialog-wrapper现在将调整为子元素的宽度，即dialog和p。

Answer 3

对word-wrap:break-word。

p

删除p的固定宽度。你可能也想给你 .dialog-wrapper固定宽度。
codepen：http://codepen.io/anon/pen/WwjddX

Answer 4

由于.dialog-wrapper绝对定位且所有left，right和width均为auto，因此width将由max-width: 80%确定{3}}算法。基本上，它将是文本的宽度。

然后，如果您对孩子使用.dialog { margin: 0 10%; }，那将小于文本的宽度。所以文本会溢出，否则会分成多行。

相反，你应该添加一些余量：

* {
  box-sizing: border-box;
}
.dialog-wrapper {
  border: 1px solid red;
  position: absolute;
}
.dialog {
  min-width: 50px;
  border: 1px solid green;
  margin: 0 10%;
}
p {
  border: 1px solid blue;
  font-size: 16px;
  font-family: Arial;
}
.wrapper2 {
  top: 100px;
}
.wrapper2 p {
  width: 253px;
}
.wrapper3 {
  top: 200px;
}
.wrapper3 p {
  width: 315px;
}

＆＃13;

<div class="dialog-wrapper">
  <div class="dialog">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  </div>
</div>
<div class="dialog-wrapper wrapper2">
  <div class="dialog">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  </div>
</div>
<div class="dialog-wrapper wrapper3">
  <div class="dialog">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  </div>
</div>

＆＃13;

apply

＆＃13;

CSS扩展<p>以适应绝对定位的父级内的文本？

4 个答案: