文本溢出显示省略号

一般文本溢出显示省略号只需要设置text-overflow:ellipsis即可

div {

　　 text-overflow:ellipsis;

　　overflow:hidden;

　　 white-space: nowrap;

}

多行文本溢出

可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

div {

　　overflow : hidden;

　　text-overflow: ellipsis;

　　display:-webkit-box;

　　-webkit-line-clamp:2;

　　-webkit-box-orient: vertical;

}

 

想要在一定的宽度内显示省略号，必须有一个固定的宽度，否则文本溢出显示省略号会失效。

但是在实际开发中，会遇到一种情况是不固定宽度也想要溢出显示省略号。

 

这时候由于.content设置了white-space: nowrap，因此内容就将父元素.right撑开， 这时候只需要给.right设置overflow:hidden就可以了

<div class="row">

　　<div class="left"></div>

　　<div class="right">

　　　　<p class="name">昵称</p>

　　　　<p

　　　　　　class="content"

　　　　　　>内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号　　　　　　　　　　内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号</p>

　　</div>

</div>

 

 

.row {

width: 100%;

height: 100px;

display: flex;

width: 500px;

margin: auto;

justify-content: center;

align-items: center;

background: rgb(253, 246, 236);

.left {

height: 100%;

width: 50px;

background: rgb(140, 197, 255);

}

.right {

height: 100%;

flex: 1;

background: rgb(254, 240, 240);

overflow:hidden;

> * {

width: 100%;

height: 25px;

display: block;

}

.content {

width: 100%;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

}

}