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

应用场景描述 例如PHP 从数据库读取一个商品,那么当商品标题很长的时候,很可能会影响页面布局。处理方法如下:PHP 字符串截取JS 字符串截取CSS 属性处理(推荐)CSS 属性处理方法 html代码片段 商品标题商品标题商品标题商品标题商品标题商品标题 9秒前 css样式代码 .cut{ display: inline-block; /让span 标签变成

应用场景描述

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

  1. PHP 字符串截取

  2. JS 字符串截取

  3. CSS 属性处理(推荐)

CSS 属性处理方法

html代码片段

商品标题商品标题商品标题商品标题商品标题商品标题
9秒前

css样式代码

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

CSS属性处理后效果:

关键字:css, html, 标题, 商品