美文网首页
CSS-文本1-文本溢出效果

CSS-文本1-文本溢出效果

作者: Java小工匠 | 来源:发表于2017-08-15 23:00 被阅读0次

1、text-overflow

属性 描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。

2、实例演示

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文本溢出包含盒子</title>
    <style type="text/css">

        .text1{
            text-overflow: ellipsis;
            white-space:nowrap; 
            width:12em; 
            overflow:hidden;
            border: 1px solid red;
            display: block;
        }
        .text2{
            margin-top: 10px;
            text-overflow: clip;
            white-space:nowrap; 
            width:12em; 
            overflow:hidden;
            border: 1px solid red;
            display: block;
        }
    </style>
</head>
<body>
    <div class="text1">测试文本溢出包含盒子,测试文本溢出包含盒子</div>
    <div class="text2">测试文本溢出包含盒子,测试文本溢出包含盒子</div>
</body>
</html>

运行效果:

image.png

相关文章

网友评论

      本文标题:CSS-文本1-文本溢出效果

      本文链接:https://www.haomeiwen.com/subject/quhbrxtx.html