-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-06-08
来源 ：
阅读 1426
评论 0
摘要：本文讲解了如何使用CSS处理标题过长，自动截断，兼容响应式布局，希望阅读本篇文章以后大家有所收获，帮助大家对HTML+CSS的理解更加深入。
应用场景描述
例如PHP 从数据库读取一个商品，那么当商品标题很长的时候，很可能会影响页面布局。处理方法如下：
PHP 字符串截取
JS 字符串截取
CSS 属性处理（推荐）
CSS 属性处理方法
html代码片段
<li >
<span class="cut">商品标题商品标题商品标题商品标题商品标题商品标题</span>
<span style="float: right;">9秒前</span></li>
css样式代码
.cut{
display: inline-block; /*让span 标签变成行内标签但具有宽高属性*/
white-space: nowrap; /*文本不进行换行*/
overflow: hidden; /*隐藏溢出文本*/
text-overflow: ellipsis; /*多出文本使用 ....代替*/
width: 7em; /*自适应布局*/
}CSS属性处理后效果：
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML/CSS频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
