a链接溢出问题的解决实践

这个问题出现在Lpisme主题里，现在已经更新解决了。另外我对前端的了解还处于实践和加深阶段，会有一些基础认识的问题，希望多多包涵。

先上图：

在文章页内，显然a链接太长，溢出了

然后第一时间去谷歌找解决方法，检索很了很多，觉得有用的就一篇

http://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/

根据文章的内容，给控制文章内容的class加上属性

这里分别单独测试了 post-content 和 post-content a

.post-content{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.post-content a{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

解决是解决了，是display: -webkit-box起作用了，但页面样式错乱，在 Chrome Developer Tools 调试很久。

然后换一个思路去解决，那就是换行吧···

直接在 post-content 添加下面的属性解决了

.post-content {
    overflow: hidden;
    text-overflow: ellipsis;
    word-spacing: normal;
    word-break: break-word;
    word-wrap: break-word;
}

其实，只需后面两个换行的属性就可以了，我也不知道为什么还要前面三个属性，但a链接溢出总算解决了。

主题的一些更新

另外：Lpisme主题去掉了instactclick.js，因为如果用cloudflare的cdn服务的情况下，会导致搜索和菜单无法下拉，如果需要用pjax的话，在footer.php修改成下面的就可以

<script src="<?php $this->options->themeUrl('js/functions.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('js/prism.js'); ?>" data-no-instant></script>
<script src="<?php $this->options->themeUrl('js/instantclick.min.js'); ?>" data-no-instant></script>
<script data-no-instant>
//Here is for Google Analytics.
</script>
<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
    if (isInitialLoad === false) {
        if (typeof Prism !== 'undefined') Prism.highlightAll(true,null);
        if (typeof ga !== 'undefined') ga('send', 'pageview', location.pathname + location.search);
    }
});
InstantClick.init();
</script>

Ok，得赶紧去完成毕业设计的原型。

本文由 Chakhsu Lau 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。