html - Text inside of <li> tag goes out of screen -

i have long text in <li> tag , goes out of screen when screen narrow.

i've tried correct width: 100%; nothing happens. additionally, text should not have fixed width, must responsive.

this code structure:

<div class="absolute-pos inline-block">   <li>       <div>       <span>           really loooonnnnggg teeeeeexxxxttttt hheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrreeeee       </span>       </div>   </li> </div>  .absolute-pos {   position: absolute; } .inline-block {   display: inline-block; } 

jsfiddle: https://jsfiddle.net/xlm5hl3w/

you have several options. here first come mind:

the first width:100%; overflow:hidden;. "clip" text goes beyond edge of page.

https://developer.mozilla.org/en-us/docs/web/css/overflow

the second word-break:break-all;. allows text wrap onto new line between 2 letters.

https://developer.mozilla.org/en-us/docs/web/css/word-break

the third -- , recommend -- <wbr> tag. tells browser it's "allowed" put breaks in long words. if there's no need break words won't, unlike <br> or space character.

https://developer.mozilla.org/en-us/docs/web/html/element/wbr

the fourth text-overflow property. gives more nuanced control on how text appears when it's long, won't affect wrapping.

https://developer.mozilla.org/en-us/docs/web/css/text-overflow

the fifth ­ special character. tells browser can break word , wrap next line using hyphen. <wbr>, applied when necessary.

soft hyphen in html (<wbr> vs. &shy;)

the sixth word-wrap:break-word;. tells browser can break long words between 2 letters. better choice word-break because tells browser break between 2 letters without being limited long words. (the fact these 2 separate things drives me bonkers.)

https://developer.mozilla.org/en-us/docs/web/css/word-wrap