标签:vue content psi webkit back die width line col
废话不多说,直接上代码。
只显示一行
<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>
标签:vue content psi webkit back die width line col
原文地址:https://www.cnblogs.com/sloanlv/p/13064851.html