Roy thomas Roy thomas - 2 months ago 8
CSS Question

How to display half of the text of a <li> element in a new line

<html>
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
</html>


Here, in the above code, how can I display half the text in the
<li>
tag in next line?

Answer

This is a beginner level question, an <ul>'s <li> is a block element, unless you assign a width to the parent or the <ul> itself - text won't wrap! FYR, I just assign width to parent <ul>, you can assign a width to the child <ul>, too:

ul { 
    width: 200px;
}

Here is a fiddle example

I hope this helps!