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.

Unfortunately, this property has limitations that make it less useful: it can only be used for single lines of text, and it also may only be applied to blocks. You can also assign the overflow property value, which takes the attributes auto, scroll, or hidden.

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 on 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 non-breaking spaces white-space: nowrap and overflow: hidden to the paragraph,
and then assign the text-overflow text-overflow mode with the value ellipsis.

Overflowing Text

Comments

Log in

Sign up

Restore access