CODEWITHSUNDEEP
csshtml
Luke Robinson
Luke Robinson

Reputation: 43

Bullet point text - wrap onto next line within div

<html> 
<head></head>
<body> 
    <div style="width: 500px; height: 80px; background-color: red; position: absolute; z-index: 1;">
    <ul style="position: absolute; z-index: 2;">
        <li> fhoaifhadlsfadslfjadhslfajshdfaldsfhalsdfjgjgldskjgaskjglsgjsldkgjslgkjsljgl </li>
        <li> </li>
    </ul>
</div>
</body>
</html>

I have this small bit of code, displaying a simple bullet point list, and a div. How would I be able to get the text to wrap around onto the next line, once the end of the div has been reached? Normally I'd use "word-wrap: break-word", but It doesnt appear to work. How else would I do this? Thanks.

Upvotes: 2

Views: 749

Answers (1)

vcapra1
vcapra1

Reputation: 2025

Disallowing overflow from the div and adding the break-all property to the ul will cause the behavior you are looking for:

<html> 
<head></head>
<body> 
    <div style="width: 500px; height: 80px; background-color: red; position: absolute; z-index: 1; overflow-x: hidden;">
    <ul style="position: absolute; z-index: 2; word-break: break-all;">
        <li> fhoaifhadlsfadslfjadhslfajshdfaldsfhalsdfjgjgldskjgaskjglsgjsldkgjslgkjsljgl </li>
        <li> </li>
    </ul>
</div>
</body>
</html>

Keep in mind that this will break in the middle of words if it needs to, in order to enforce that it fits in the div

Upvotes: 2

Related Questions