贤话师兄
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>CSS>正文

标题内容显示溢出处理样式优化

君语贤 2018-07-16 17:00 内容显示标题样式优化

有时候时候,难免会出现标题内容在列表页或者其他的显示区域无法完整的显示全部内容的时候,这个时候如果选择部分截取的话,既不利于搜索引擎信息检索,也不利于用户的体验。那么这种情况下应该如果处理为好呢?下面直接上优化结果:

标题内容显示溢出处理样式优化

其中涉及的核心样式代码完整为:

dl.txcms li {
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    margin: 0px;
    border-top: 1px dotted #ddd;
    color: #999999;
    white-space: nowrap;
    text-overflow: ellipsis;
}

对于处理溢出和超长显示为省略号的核心控制代码为:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

注意事项:链接的标题需要确认在代码层面已经完全显示,且需要额外加一个title属性,属性值为标题,这样才会在鼠标滑过的时候显示完整的标题。

本文链接:https://blog.weguiding.com/web/css_370.html