如何用css3控制超出三行并且第三行添加省略号

html-css020

如何用css3控制超出三行并且第三行添加省略号,第1张

不需要用css3，直接定义他的最大高度max-height即可，算好行高如果是20那就三排是20*3=60px

文字超出后省略号是text-overflow:ellipsis

<style>

.t{width:100pxline-height:20pxmax-height:60pxoverflow:hiddentext-overflow:ellipsis}

</style>

<p class="t">测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

超出指定文本以省略号显示效果，用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"使用才行