应用场景描述
例如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属性处理后效果:
原文地址:https://www.cnblogs.com/homehtml/p/12630297.html
时间: 2024-10-11 07:48:13