闲着写点简单的分享

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

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

先上图:

965412375.png

在文章页内,显然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-contentpost-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 调试很久。

88884543322.png

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

77523166699.png

直接在 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,得赶紧去完成毕业设计的原型。

已有 2 条评论
  1. Sun

    按博主的方法改了,但是不行,同样方法在别人网站就可以。。。。

    Sun 回复
  2. WeiCN

    偷偷的说一下
    引用也会溢出,同样的,在css的blockquote添加了word-break: break-word;word-wrap: break-word;解决

    WeiCN 回复
发表新评论