css3 超出部分省略

CSS3中的text-overflow属性可以帮助我们省略文本中超出容器的部分，使页面更加美观。在实际应用中，有四个值可以选择：ellipsis、clip、string、initial，默认值是clip。

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

上面的例子中，我们使用了text-overflow: ellipsis，这表示当容器中的文本超出容器时，末尾用省略号表示省略的部分。

.clip{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

当我们将text-overflow设为clip时，容器内部超出的文本将被直接切除，不会显示。

.string{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: string;
}

text-overflow设为string时，超出部分将会被一个指定的字符串替代，默认是空格。

.initial{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: initial;
}

最后，text-overflow设为initial，表示使用默认值clip。

除了text-overflow之外，我们还可以使用text-overload-wrap属性来设置容器中超出部分的换行方式。如果不使用这个属性，则默认超出部分不会换行。

.hyphen{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
    

在一些特定场景下，我们甚至可以将text-overflow和text-overload-wrap配合使用，来实现在超出部分省略的同时，让超出部分换行。如上面的例子，我们使用了word-break: break-all和word-wrap: break-word来实现超出部分的自动换行。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！