css如何把超出部分隐藏，显示省略号

欧阳锋 · 发表于 2020-6-8 17:43:30

废话不多说，直接上代码实例：

只显示一行

<div class="line">
<p>
一般自己写项目时，一个接口URL 就可以了。但在实际项目开发中，一个项目可能会请求不同的服务器的url，这时，我们简单的配置下访问接口域名，然后不同域名的接口，直接换对象调用即可，这样不管有多少个不同的接口，我们都可以很好的管理使用。
</p>
</div>
<style>
.line{
width: 400px;
}
.line p{
line-height: 40px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>

复制代码

固定高度

方法一：

<div class="block">
<p>
在Vue 项目开发中，我们与接口打交道最多了，如何来优雅的使用Axios变得尤为重要了。通常我们通过客户端向后端发送请求来接收接口数据，然后将这些接口数据完美的呈现到网页上。
</p>
</div>
<style>
.block{
width: 400px;
height: 80px;
position: relative;
overflow: hidden;
}
.block p{
line-height: 40px;
}
.block:after {
content: "...";
position: absolute;
bottom: 12px;
right: 0px;
padding-left: 20px;
background: -webkit-linear-gradient(right, transparent, #fff 50%);
background: -o-linear-gradient(right, transparent, #fff 50%);
background: -moz-linear-gradient(right, transparent, #fff 50%);
background: linear-gradient(to right, transparent, #fff 50%);
}
</style>

复制代码

方法二（推荐）：

<div class="block">
<p>
在Vue 项目开发中，我们与接口打交道最多了，如何来优雅的使用Axios变得尤为重要了。通常我们通过客户端向后端发送请求来接收接口数据，然后将这些接口数据完美的呈现到网页上。
</p>
</div>
<style>
.block{
width: 100%;
font-size: 14px;
line-height: 18px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>

复制代码

		自动登录	找回密码
密码			会员注册

[CSS/Html] css如何把超出部分隐藏，显示省略号