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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 太厉害了,终于有人能把TCP/IP 协议讲的明明白白了「建议收藏」

    一图看完本文一、计算机网络体系结构分层计算机网络体系结构分层计算机网络体系结构分层不难看出,TCP/IP与OSI在分层模块上稍有区别。OSI参考模型注重“通信协议必要的功能是什么”,而TCP/IP则更强调“在计算机上实现协议应该开发哪种程序”。二、TCP/IP基础1.TCP/IP的具体含义从字面意义上讲,有人可能会认为…

    2022年4月12日
    44
  • 你的产品在强制用户按照你的意愿去操作吗「建议收藏」

    你的产品在强制用户按照你的意愿去操作吗「建议收藏」最近小编买了一台某品牌的洗衣机,在国内挺有名的品牌,因为相信这个品牌才买的。买完之后,小编自己在家洗衣服,发现老是滴滴响,然后终止运行了,本来简单的几件衣服,洗了一下午没洗完,自己甚是苦恼。自己看了一下机器上的告警编码,又看了一下说明书,发现是由于洗衣机为了防止漏水而发生告警。主要原理是这样的:洗衣机启动运行,开始进水,如果进水超过40分钟,还没有达到设定的水位,洗衣机就停止运转了,并发出滴滴的告…

    2022年6月24日
    22
  • PHP curl_init函数——爬虫必备

    PHP curl_init函数——爬虫必备原文地址:http://www.jb51.net/article/25193.htm我们可以使用PHP的扩展库-Curl,这个扩展库通常是默认在安装包中的,你可以它来获取其他站点的内容,也可以来干别的。 备注:这两段代码需要php_curl扩展库的支持,查看phpinfo(),如果curlsupport enabled则表示支持curl库。 1、Windows下的PHP开启curl库

    2022年7月12日
    19
  • 什么是词向量?(NPL入门)

    什么是词向量?(NPL入门)什么是词向量?我们组实训选择的主题是与自然语言识别相关的,那么就不得不学习和了解一下自然语言识别中非常重要和基础的。于是我对于自己对词向量的学习进行了以下的总结。简而言之,词向量技术是将词转化成为稠密向量,并且对于相似的词,其对应的词向量也相近。一、词的表示在自然语言处理任务中,首先需要考虑词如何在计算机中表示。通常,有两种表示方式:one-hotrepresenta…

    2022年6月14日
    43
  • istio解决了什么问题(istio k8s)

    问题简述通过istio实现灰度发布,浏览器访问报404错误,但是通过curl传递一个Host请求头就能访问成功。问题复现RancherUI界面启动Istio,并开启ingress网关命名空间启动Istio自动注入部署nginx应用###deploy-nginx-v1.yamlapiVersion:apps/v1kind:Deploymentmetadata:labels:app:nginxversion:v1name:nginx-v1n

    2022年4月16日
    112
  • 云计算与边缘计算协同 九大应用场景

    云计算与边缘计算协同 九大应用场景来源:物联网报告中心前言2019年边缘计算备受产业关注,一度引起了资本市场的投资热潮,很多人把2019年称作边缘计算的元年。理性来看,造成如此火爆局势难免有…

    2022年6月22日
    40

发表回复

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

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