CSS3 文本溢出(Text Overflow)

CSS3的新文本属性可提供对文本呈现的更多指定。

在CSS3中处理文本溢出

CSS3引入了几个新的属性属性来修改文本内容，但是其中一些属性已经存在很长时间了。这些属性使您可以精确指定Web浏览器上文本的呈现。

隐藏溢出文本

例如，如果将空白元素的white-space属性值设置为nowrap，或者单个单词太长而无法容纳较长的电子邮件地址，则可能会导致文本溢出（例如，将其禁止换行）。在这种情况下，可以使用CSS3 text-overflow属性来确定溢出文本内容的显示方式。

您可以显示或剪切溢出的文本，也可以剪切并在剪切文本的palace中显示省略号或自定义字符串，以指示用户。

L'attribut word-break属性接受的值为：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　*/
}

interrompt le texte en surplus

Vous pouvez également utiliser CSS3 word-wrapfractionne un mot long et le met en ligne pour que la limite de l'élément contenant soit dépassée.

L'attribut word-Les valeurs acceptées par l'attribut wrap sont : normal et break-word。

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

Spécifier les règles de saut de ligne du texte

Vous pouvez également utiliser CSS3 word-breakL'attribut spécifie automatiquement les règles de saut de ligne du texte (c'est-à-dire, comment couper les mots).

En utilisant des valeurs acceptables word-L'attribut break est : normal, break-all et keep-all。

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