css显示省略号

html-css012

css显示省略号,第1张

.goods {

/* 一行显示*/

-webkit-line-clamp: 1

/* 将对象作为弹性伸缩盒子模型显示 */

display: -webkit-box

/*子元素的排列方式 */

-webkit-box-orient: vertical

text-overflow:ellipsis

overflow: hidden

word-break:break-all

}

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