CSS防止文本溢出父级div

Question

我有一个网站描述

<div class="a_desc">
    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean     commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
</div>
<div>
  Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div>
</div>

CSS：

.a_desc{
position: relative;
margin: 0.4em auto 0 auto;
background: rgba(27,27,25,0.7);
max-width: 500px;
padding:0.4em;
border-radius: 1em;
font-weight: 100;
max-height: 100%:
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
}
.a_desc > div{
margin-bottom: 0.5em;
line-height: 17px;
display: table;
}
.a_desc > div:last-child:after{
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

在安卓手机上它可以正常工作，但是当我在iPhone上测试时，文本会溢出父级div：

如何避免这种情况发生？怎样才能使父元素扩展以适应所有文本？

- August

Answer 1

没有人给我正确的答案，所以我不断尝试，结果发现如果你将父元素设置为 display: table;，子元素设置为 display: table-row;，它就可以正常工作。

- August

Answer 2

如果您想隐藏溢出文本，请使用：

overflow: hidden;

- Tim

Answer 3

你可以处理溢出：

a_desc > div{       
overflow: hidden; 
}

如果您不想截断文本，可以使用以下代码在其中添加滚动条：

a_desc > div{
  overflow: auto;
}

- MaartenN

Answer 4

一个可能的选项是设置属性：

overflow-y: scroll;

否则，您可以使用：

overflow-y: hidden;

垂直地剪裁文本。

- Alexander Bell

Answer 5

这应该可以工作：

.a_desc > div{
margin-bottom: 0.5em;
line-height: 17px;
display: table;
height: 100%;
}

我也会将文本放在p元素中以进行SEO，并仅为它们提供display:block或inline-block，因为这样看起来相同但代码更整洁。

- jasper

---

否则请给出：.a_desc {高度：自动} - jasper

它仍然溢出了。 - August

你能否尝试使用 .a_desc{ min-height: 100%; } 而不是 max？ - jasper

Answer 6

如果你想让你的容器在窗口大小调整时自动扩展/改变形状，请使用以下代码：

width: 100%;
height: auto;

这对我很有效。当我改变窗口大小时，容器会响应以保持文本在内。

- david bell