Maison > interface Web > Questions et réponses frontales > Comment utiliser la propriété CSS Text-Overflow

Comment utiliser la propriété CSS Text-Overflow

青灯夜游
Libérer: 2019-05-29 16:58:39
original
3201 Les gens l'ont consulté

css text-overflow属性用于指定当文本溢出包含它的元素时,应该发生什么事情。所有主流浏览器都支持 text-overflow 属性。

Comment utiliser la propriété CSS Text-Overflow

css text-overflow属性怎么用?

text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法:

text-overflow: clip|ellipsis|string;
Copier après la connexion

属性值:

● clip:修剪文本。

● ellipsis:显示省略符号来代表被修剪的文本。

● string:使用给定的字符串来代表被修剪的文本。

注释:所有主流浏览器都支持 text-overflow 属性。

css text-overflow属性 示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
</style>
</head>
<body>
<p>以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:&#39;>>&#39;;">This is some long text that will not fit in the box</div>
</body>
</html>
Copier après la connexion

效果图:

Comment utiliser la propriété CSS Text-Overflow

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal