设置相对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;

要使元素尊重宽度，您需要将元素上的显示更改为内联块或块。

display: inline-block;
display: block;