CSS3 Text Overflow (Text Overflow)

CSS3new text properties can provide more specific specifications for text rendering.

in CSS3to handle text overflow

CSS3Several new properties have been introduced to modify text content, but some of these properties have been around for a long time. These properties allow you to precisely specify the rendering of text on web browsers.

Hide the overflowing text

For example, if the space of the blank element iswhite-spaceIf the property value is set to nowrap, or if a single word is too long to fit a longer email address, it may cause text overflow (for example, by preventing line breaks). In this case, you can use CSS3 text-overflowproperty to determine the display style of the overflowing text content.

You can display or cut the overflowing text, or cut and display an ellipsis or a custom string in the palace of the cut text to indicate to the user.

The word-The 'break' property accepts values: clip, ellipsis,string.

p {
　　　　width:　400px;
　　　　overflow: hidden;
　　　　white-space: nowrap;
　　　　background: #cdcdcd;
}
p.clipped {}}
　　　　text-overflow: clip;　/*　clipped the overflowed text　*/
}
p.ellipses {
　　　　text-overflow: ellipsis;　/*　display '…' to represent clipped text　*/
}

Break Overflow Text

You can also use CSS3 word-wrapattribute breaks a long word and wraps it, so that the boundary of the containing element overflows.

The word-The wrap property accepts values: normal and break-word.

p {
　　　　width:　200px;
　　　　background: #ffc4ff;
　　　　word-wrap: break-word;
}

specify text wrapping rules

You can also use CSS3 word-breakThe attribute specifies the text wrapping rules (i.e., how to wrap within words).

Through the acceptable value word-The break property is: normal, break-all and keep-all.

p {
　　　　width:　150px;
　　　　padding:　10px;
}
p.break {
　　　　background: #bedb8b;
　　　　word-break: break-all;
}
p.keep {
　　　　background: #f09bbb;
　　　　word-break: keep-all;
}