Theory
Theory
Comments

Overflowing Text

Another interesting text property is text-overflow. It allows you to determine how the text will look if it does not fit in the container. It takes different values, but clip and ellipsis are universal and work in all modern browsers.

The clip value is set by default, and it will simply cut text to fit the size of the container, whereas ellipsis will cut it and add an ellipsis to the end of the line.

This property handles text that overflows a line within a block container. To see the effect, the container’s overflow must be something other than visible, such as hidden. For a single-line ellipsis, we’ll also prevent wrapping with white-space: nowrap.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Overflowing Text</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <p>Muffin woke up in his cat bed very early that morning. The day promised to be eventful. Due to this, he decided to work out on his chin-up bar. The cat eventually tired himself out exercising, and he decided to relax a bit and watch TV. Having regained his strength, the cat went about his usual business of making a mess. However, he was caught in the act.</p> </body> </html>

CSS

body { background: url("bokeh.jpg") no-repeat 50% 0; color: #333333; font-size: 12px; font-family: "Arial", sans-serif; } p { margin: 50px auto; padding: 20px; width: 50%; background-color: rgba(240, 240, 240, 0.85); font-size: 16px; line-height: 22px; }

Goalscompleted

Assign the properties white-space: nowrap and overflow: hidden to the paragraph,
and then assign the text-overflow mode with the value ellipsis.

Overflowing Text

Comments

Log in

Sign up

Restore access