css设置当字数超过限制后以省略号(…)显示

css设置当字数超过限制后以省略号(…)显示

大家好,又见面了,我是全栈君。

  1. 文字超出一行,省略超出部分,显示’…’
    用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

     

  2. 多行文本溢出显示省略号

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    注:

            ①-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

            ②display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

            ③-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 

 

转载于:https://my.oschina.net/webcaorui/blog/1560376

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108064.html原文链接:https://javaforall.net

(2)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SpringBoot验证码

    SpringBoot验证码原生 js SpringBoot hutool 工具 实现浏览器验证码功能 点击可刷新

    2025年6月17日
    2
  • 经典游戏—贪吃蛇从C++代码实现[通俗易懂]

    经典游戏—贪吃蛇从C++代码实现[通俗易懂]小时候都玩过贪吃蛇这个经典的小游戏,在我们的普通手机里似乎都是必备的。它伴随着我们的童年,经历了好多好多时光。它带给我们了许多的乐趣。学习了c++这门编程语言后,我就想着能不能把它做出来,在我查看了相关知识后,明白了其中的道理,就尝试着自己写出这个小游戏来,而且加入了许多可玩性的东西,包括等级选择,暂停/继续和分数制。整个程序采用了类和数组的相关知识实现。//=====================================

    2022年5月9日
    52
  • intellijidea激活码2021【2021最新】

    (intellijidea激活码2021)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月21日
    64
  • struts中的action_type object has no attribute

    struts中的action_type object has no attribute在Strust2中,有一个内置对象叫ActionContext,通过该对象可以获得之前Servlet中的对象,比如:requst对象,response对象…那么为什么可以通过ActionContext获得那些对象呢?那是因为在ActionContext内容引用了那些对象,也就是在ActionContext内部记录了那些对象的地址,看下图上图就是简单理解为什么通过Action

    2022年9月10日
    0
  • 最全Mac系统快捷键一览

    最全Mac系统快捷键一览Mac中主要有四个修饰键,分别是Command,Control,Option和Shift。这四个键分别有自己的图案,他们经常出现在Mac应用程序中的菜单栏里,方便你随时学习新的快捷键。MAC键盘快捷键符号图例通用Command是Mac里最重要的修饰键,在大多数情况下相当于Windows下的Ctrl。所以以下最基本操作很好理解:Command+Z 撤销Comma

    2022年5月25日
    26
  • python 数组转换为字典_char转换为string

    python 数组转换为字典_char转换为string先看下join函数:语法为:str.join(sequence)sequence–要连接的元素序列实例一:连接字符串str1=’-‘seq=(“a”,”b”,”c”)printstr1.join(seq)实例二:连接数组(数组元素为字符串)str2=’*’seq2=[“a”,”b”,”c”]printstr2.join(seq2)

    2022年10月9日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号