CSS3如何实现超出指定文本以省略号显示效果

html-css06

CSS3如何实现超出指定文本以省略号显示效果,第1张

超出指定文本以省略号显示效果，用css的"text-overflow:ellipsis"实现

text-overflow:ellipsis 溢出的部分用 省略号 表示。

<!DOCTYPE html>

<html>

<head>

<style> 

div.test

{

    white-space:nowrap 

    width:123px 

    overflow:hidden 

    border:1px solid #000000

    text-overflow:ellipsis

}

</style>

</head>

<body>

    <p>这个 div 使用 "text-overflow:ellipsis" ：</p>

    <div class="test">

        This is some long text that will not fit in the box

    </div>

</body>

</html>

在div块中要设置宽度，"overflow:hidden"要跟"text-overflow:ellipsis"使用才行

这是一个数学问题。

当盒子模型和图片比例不一致时，要保持比例显示会出现两种情况：

一种是覆盖裁剪background-size: cover，即以短边为标准，图片缩放铺满整个容器的宽高，多出来的部分会裁剪掉；

另一种是完整包含background-size: contain，即以长边为标准，图片缩放完全展示在容器的内部，不足的部分会填充空白。

当盒子模型和图片比例不一致时，不保持比例显示可对图片进行拉伸以铺满整个容器的宽高background-size: 100% 100%；或对高进行拉伸background-size: auto 100%或对宽进行拉伸background-size: 100% auto ；或设置固定数值background-size: 20px 30px 。