重温大漠CSS3知识文本篇 text-overflow

作者: 聪少Jeff | 来源:发表于2018-07-22 20:51 被阅读10次

重温大漠CSS3知识文本篇 text-overflow
重温大漠CSS3知识之文本篇
重温大漠CSS3知识之开篇
CSS3 基础（2）——文本效果和字体
CSS3 文本_边框_背景渐变_动画_3D
多行文本溢出省略ellipsis...css/scss/js方法
第十一周第四天笔记之css3知识解读
css3渐变:线性和径向
CSS3 背景
带你重温《大漠巾帼情》

当网页制作中遇到了文本内容溢出的问题，你会使用什么CSS3方法来处理呢？此时CSS3的text-overflow会帮助你解决这一个问题。^-

Snip20180722_1.png

text-overflow:clip 实例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3 文本溢出</title>
    <style>
        .text-overflow-clip {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            /* clip属性值时，文本没有被裁切，div自动撑高以适应内容的高度。 */
            text-overflow: clip;
        }
    </style>
</head>
<body>
    <div class="text-overflow-clip">
        Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
    </div>
</body>
</html>

效果

Snip20180722_2.png

text-overflow:clip 实例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3 文本溢出</title>
    <style>
        .text-overflow-clip {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            /* clip属性值时，文本没有被裁切，div自动撑高以适应内容的高度。 */
            text-overflow: clip;
            /* 强制不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="text-overflow-clip">
        Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
    </div>
</body>
</html>

效果

Snip20180722_3.png

text-overflow: elipsis 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3 文本溢出</title>
    <style>
        .text-overflow-clip {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            /* 当文本长度受到元素容器的大小限制无法显示完整，将用'...'来代替隐藏部分 */
            text-overflow: ellipsis;
            /* 强制不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="text-overflow-clip">
        Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
    </div>
</body>
</html>

效果

Snip20180722_5.png