大部分场景都是超过一行就显示...
<template>
<div class="other-product-item item-name" :title="item.name">{{item.name}}</div>
<div class="other-product-item item-name" :title="item.name">{{item.name}}</div>
<template>
<script>
export default {
return {
item: {name:'this is a very long name,this is a very long name,this is a very long name'}
}
}
</script>
<style lang="scss">
.other-product-item {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item-name {
font-size: 14px;
}
</style>

Css 设置超过再两行显示省略号的更多相关文章

  1. CSS设置文本末行显示省略号...

     首先设置文本标签或文字所在标签的宽度   最主要是以下三点:        ①white-space:nowrap;如果是中文需要设置行末不断行       ②overflow:hidden;设置控 ...

  2. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  3. css设置文字多余部分显示省略号

    如果只显示一行,则可以使用以下方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 如果需要显示多行,在需要设置的元素s ...

  4. css设置文字超出部分显示省略号。。。

    兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  5. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  6. javascript超过容器后显示省略号效果(兼容一行或者多行)

    javascript超过容器后显示省略号效果       在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...

  7. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  8. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  9. css如何简单设置文字溢出盒子显示省略号

    1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...

随机推荐

  1. Python协程之Gevent模块

    背景 进程是操作系统分配资源的最小单位,每个进程独享4G的内存地址空间,因此进程内数据是安全的,检查间的通信需要使用特定的方法.同理,正是因为进程是数据安全的,所以导致进程的切换是一个很麻烦效率不高的 ...

  2. Java中的大数值使用

    在Java中,偶尔会遇到超大数值,超出了已有的int,double,float等等你已知的整数.浮点数范围,那么可以使用java.math包中的两个类:BigInteger和BigDecimal. 这 ...

  3. R星游戏如何绑定二次验证码_虚拟MFA_两步验证_谷歌身份验证器?

    一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接 R星游戏如何绑定二次验证码_虚拟MFA_两步验证_谷歌身份验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1.无需下载 ...

  4. LaTeX公式学习

    简介 本文公式较多可能有加载较慢. 使用 LaTeX 的主要原因之一是它可以方便地排版公式.我们使用数学模式来排版公式. 公式 插入公式 可以用一对$来启用数学模式. 行中公式可以用如下方法: $数学 ...

  5. cli框架 获取 命令行 参数

    package main import ( "fmt" "log" "os" "github.com/urfave/cli&quo ...

  6. 360随身WiFi3:纯净版无线网卡驱动下载及安装教程(Windows10版本)

    对于不带无线网卡的台式机,买一个360随身WiFi当无线网卡是很省钱的方法.但是这个随身WiFi3用的芯片较为奇葩,Win10下不太好找驱动.什么,你问我为啥不用360官网上的驱动?那个“驱动”装了之 ...

  7. Day14_RabbitMQ及数据同步

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 0.学习 ...

  8. 3-Pandas之什么是Panel?

    一.什么是Panel Series:包含一维索引的一组数据 DataFrame:包含index和columns两个轴 Panel(面板):一种三维数据容器 一个Panel对象由3个轴构成: items ...

  9. PHP date_timezone_get() 函数

    ------------恢复内容开始------------ 实例 返回给定 DateTime 对象的时区: <?php$date=date_create(null,timezone_open( ...

  10. PHP imagecolorclosest - 取得与指定的颜色最接近的颜色的索引值

    imagecolorclosest — 取得与指定的颜色最接近的颜色的索引值.高佣联盟 www.cgewang.com 语法 int imagecolorclosest ( resource $ima ...