Question

I am working on a web project and I have a popup b ox that allows the user to type in some text and this text is then appened onto the end of a content editable and the text is within span class.

I want the width to be 80% and the text to wrap but the width is being ignored and the text is all bunched up and over lapping each line.

Below is what it looks like.

And below is the 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;

Thanks for any help you can provide

Answer 1

If the text is in a span, it will default to being an inline element. Inline elements do not respect height and width properties. Inline elements however will respect line-height, and this property will fix your overlapping issue.

line-height: 20px;

To get your element to respect width, you will need to change the display on the element to inline-block or block.

display: inline-block;
display: block;