Overflow di testo di CSS3

Le nuove proprietà di testo in CSS3 offrono più specifiche per la presentazione del testo.

Gestione del sovraccarico del testo in CSS3

CSS3 ha introdotto alcune nuove proprietà per modificare il contenuto del testo, ma alcune di queste proprietà esistono da molto tempo. Queste proprietà ti permettono di specificare con precisione la presentazione del testo nei browser web.

nascondere il testo sovrannumerario

ad esempio, se si nasconde l'elemento di spaziatura,white-spacese l'attributo value è impostato su nowrap, o se una parola è troppo lunga per essere contenuta, può causare il sovraccarico del testo (ad esempio, impedire il rientro). In questo caso, puoi usare CSS3 text-overflowattributo per determinare il modo di visualizzazione del testo sovrannumerario.

Puoi mostrare o tagliare il testo sovrannumerario, o tagliare e mostrare un punto ellittico o una stringa personalizzata nel palace del testo tagliato per indicare all'utente.

L'attributo word-break accetta i valori: 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　*/
}

Interrompi il testo overflow

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

The values accepted by the word-wrap property are: normal and break-word.

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

to specify the text line break rules

You can also use CSS3 word-breakThe attribute specifies the line break rules for text (i.e., how to break words).

Through acceptable values, the word-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;
}