a. Hidden
b. Visible
c. ellipsis
<!DOCTYPE html>
<html lang="en"> <head> <style> p.one { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.two { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } p.three { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } .three:hover { overflow: visible; } </style> </head> <body> <p class="one">Lorem, ipsum dolor sit amet consectetur adipis icing elit. Accusantium, magnam.</p>
<p class="two">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, dicta.</p> <p class="three">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, dicta.</p> </body> </html> |
<!DOCTYPE html>
<html lang="en"> <head> <style> p.one { width: 100px; border: 1px solid #000000; word-wrap: break-word; } </style> </head> <body> <p class="one">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium, magnaml .</p> </body> </html> |
<!DOCTYPE html>
<html lang="en"> <head> <style> p.one { width: 100px; border: 1px solid #000000; word-wrap: break-word; } p.two { width: 100px; border: 1px solid #000000; word-break: keep-all; } </style> </head> <body> <p class="one">Lorem, ipsum dolor sit amet consectetur adipisicinddddddddddddddddffdg.</p> <p class="two">Lorem, ipsum dolor sit amet consectetur adipisicinddddddddddddddddffdg.</p> </body> </html> |
<!DOCTYPE html>
<html lang="en"> <head> <style> p.one { writing-mode: horizontal-tb; } p.two { writing-mode: vertical-rl; } p.three { writing-mode: vertical-rl; } </style> </head> <body> <p class="two">Lorem, ipsum dolor sit amet consectetuelit..</p> <p class="one">Lorem, ipsum dolor sit amemet..</p> <p class="three">Lorem, ipsum dolor sit amet consecpisicing..</p> </body> </html> |