使用CSS处理标题过长,自动截断,兼容响应式布局

2021-03-27 13:28

阅读:723

标签:oat   响应   推荐   ellipsis   css样式   溢出   play   isp   boa   

应用场景描述

例如PHP 从数据库读取一个商品,那么当商品标题很长的时候,很可能会影响页面布局。处理方法如下:

  • PHP 字符串截取

  • JS 字符串截取

  • CSS 属性处理(推荐)

CSS 属性处理方法

html代码片段

  • 商品标题商品标题商品标题商品标题商品标题商品标题 9秒前
  • css样式代码

    .cut{
        display: inline-block;        /*让span 标签变成行内标签但具有宽高属性*/
        white-space: nowrap;         /*文本不进行换行*/
        overflow: hidden;           /*隐藏溢出文本*/
        text-overflow: ellipsis;   /*多出文本使用 ....代替*/
        width: 7em;                /*自适应布局*/
    }

    CSS属性处理后效果:

    技术图片

    使用CSS处理标题过长,自动截断,兼容响应式布局

    标签:oat   响应   推荐   ellipsis   css样式   溢出   play   isp   boa   

    原文地址:https://www.cnblogs.com/homehtml/p/12630297.html


    评论


    亲,登录后才可以留言!