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

Question

我正在开发一个 Web 元素，我有一个弹出框，允许用户输入一些文本，然后将此文本附加到可编辑内容的末尾，并且该文本位于 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

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

line-height: 20px;

要让您的元素符合宽度，您需要将元素上的显示更改为内联 block 或 block 。

display: inline-block;
display: block;