首页 > 云开发 > Html > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

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

Html

应用场景描述

例如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属性处理后效果:

文章来源:segmentfault,作者:烟火里的尘埃。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

标题 兼容 布局 css

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索