html - 设置相对 div 的宽度不起作用

Question

我正在做一个网络项目，我有一个弹出框，允许用户输入一些文本，然后这个文本被附加到可编辑内容的末尾，并且文本在 span 类中。

我希望宽度为 80% 并且要换行的文本，但宽度被忽略并且文本全部聚集在一起并重叠每一行。

下面是它的样子。

下面是css ..

font-style: italic;
background-color: #ababab;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
height: auto;
width: 80%;
padding: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

感谢您的任何帮助，您可以提供

Answer 1

如果文本在跨度中，则默认为内联元素。内联元素不尊重高度和宽度属性。然而，内联元素将尊重行高，并且此属性将解决您的重叠问题。

line-height: 20px;

为了让您的元素尊重宽度，您需要将元素上的显示更改为 inline-block 或 block。

display: inline-block;
display: block;