最多显示2行文字,多余的省略显示。

这篇具有很好参考价值的文章主要介绍了最多显示2行文字,多余的省略显示。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端在 CSS 中最多显示 2 行文字,可以使用 overflow: hidden 和 text-overflow: ellipsis 属性,并设置一个高度限制。

例如:

.box { 
    overflow: hidden;
    text-overflow: ellipsis;
  // 只要超过宽度就换行,不论中文还是英文
    word-break: break-all;
 //最多展示两行
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
//根据样式设置
    line-height: 1.2em;
    max-height: 2.4em;
}

这样,如果文本需要更多的行数才能完全显示,则会省略多余的文本并在末尾显示省略号(...)。文章来源地址https://www.toymoban.com/news/detail-438227.html

到了这里,关于最多显示2行文字,多余的省略显示。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js超过的文字用省略号显示

    省略多余字符,用...显示。 js方法: export function ellipsis(value, len) {   if (!value) return \\\'\\\'   if (value.length len) {     return value.slice(0, len) + \\\'...\\\'   }   return value } css方法 1、文字超出一行,省略超出部分,显示’…’,加宽度width属来兼容部分浏览,用text-overflow:ellipsis属性来。  

    2024年02月12日
    浏览(59)
  • flutter中文字长度溢出时如何显示省略号?

    经常在绘画UI的时候遇到这种问题,依据场景不同,说下我自己的常用方案: 1. 第一种就是给Text标签外层嵌套一层Container,并指定width宽度 2.第二种是自动适配模式,我常用于Text外层嵌套了Row和Column以及一些布局控件中

    2024年02月15日
    浏览(49)
  • css 实现超出两行、多行文字省略号显示

    在我们日常使用文字超出省略号显示,一般使用下面的方式实现,但是当有需求需要实现两行乃至多行时,该怎么实现呢。 单行省略: 多行省略: ps:需要注意的是,记得控制元素width。

    2024年02月11日
    浏览(57)
  • CSS:实现文字溢出显示省略号且悬浮显示tooltip完整信息

    组件: element ui中的tooltip组件 思路:通过ref获取宽度进行判断,当子级宽度大于对应标签/父级宽度显示tooltip组件

    2024年02月09日
    浏览(53)
  • ElementUI Table实现多行省略,鼠标移动上去显示所有文字内容

    ElementUI table文字超出一行,隐藏多余文字,移入显示tips。 今天写项目的时候,实现在table里面的文字过长,需要做悬浮文字提示的功能 给el-table-column设置 :show-overflow-tooltip=\\\"true\\\" 属性可以使单元格超出的内容自动折叠显示,当鼠标移入时单元格的上方会自动弹出一个小tips来显

    2024年02月11日
    浏览(48)
  • echarts的横向柱状图文字省略,鼠标移入显示内容 vue3

    效果图 如果是在x轴上的,就在x轴上添加 triggerEvent: true, 如果是y轴就在y轴添加,我是在y轴上添加的 并且自定义的方法(我取名为 extension ) 然后我放在末尾引入的 数据格式

    2024年02月04日
    浏览(68)
  • 微信小程序——CSS限制文字宽度和行数(溢出显示省略号)

    知识专栏 专栏链接 微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 监听页面滑动 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 判断用户上滑还是下滑 https://blog

    2024年02月10日
    浏览(62)
  • element-plus中的tooltip组件实现文字溢出显示省略号,悬浮显示tooltip完整信息

    需求:要求单行显示文字,溢出部分需要显示省略号,但鼠标悬浮时需要显示 tooltip 完整信息。 关键点:文字溢出显示省略号就不说了,主要是如何判断什么时候需要显示 tooltip,什么时候不显示。 思路:如果文字省略时,子元素的宽度势必小于父元素的宽度,则可通过监听

    2024年02月12日
    浏览(59)
  • echarts统计图x轴文字过长,以省略号显示,鼠标经过提示全部内容

    效果图如下 主要代码如下:

    2024年02月15日
    浏览(57)
  • echarts柱状图x轴文字太多如何解决?超出省略显示成点例子代码

            在前端开发任务中使用echarts柱状图时,会出现x轴某项文字太长了这种情况,那么echarts柱状图x轴文字太多如何解决?办法是超出省略显示成点就行效果图看下图所示,在x轴的axisLabel里加一个formatter函数,index等于3表示字数为3个超出就显示成点。 rotate: 30, 倾斜30度

    2024年02月05日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包