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

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

应用场景描述

例如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, 标题, 商品

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！

推荐阅读