CSS防止文本溢出父div

Question

我有一个网站的描述 HTML：

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

它在Android手机上运行正常，但是当我在iphone上测试时，文本会溢出父div：

如何防止这种情况，如何扩展父级以适应所有文本？

Answer 1

如果要隐藏溢出的文本，请使用：

overflow: hidden;

Answer 2

没有人给我正确的答案，所以我一直在努力，如果你只是将父母设为display: table;而将孩子设为display: table-row;

Answer 3

您可以使用溢出：

a_desc > div{       
overflow: hidden; 
}

如果您不想剪切文本，可以在其中添加滚动条：

a_desc > div{
  overflow: auto;
}

Answer 4

一种可能的选择是设置属性：

overflow-y: scroll;

否则，您可以使用：

overflow-y: hidden;

垂直剪辑文本。

Answer 5

这应该有效：

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

我也会将文本放在搜索引擎优化的p元素中，然后只给它们display: block或inline-block，因为这看起来会相同，但会更加简洁。

Answer 6

如果您希望容器随着窗口大小的变化而扩展/重塑，请使用以下代码：

width: 100%;
height: auto;

这对我有用。当我更改窗口大小时，容器会做出响应以将文本保留在其中。