登录 注册

登录

已解决 “热门文章”里的标题会自动分两行展示,有点难看,怎么破?

更多
2016年09月28日 22:49 #1 作者: 安之若
站长你好!
又一个问题是,目前网站右侧用了“热门文章”“最新文章”模块,可是它们圈进来的文章标题如果比较长(11个汉字一行),就会自动分两行展示,既占空间又难看,有什么办法解决吗?

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年09月28日 23:16 #2 作者: Joomla之门
Joomla 核心自带的“热门文章”及“最新文章”模块不具备“截断过长标题”的功能。不过,我们可以通过 CSS 技巧来实现字串截断:

鉴于你的网站使用的是 Joomla 3 自带的 Protostar 模板,从 Joomla 3.5 开始,这个模板已经支持自定义 CSS 文件了。所以,操作方法如下:

1、在 /templates/protostar/css/ 这个目录中,新建一个文件名叫 user.css (如果已存在,就打开续写);

2、在 user.css 文件末尾插入如下代码:
ul.latestnews li, ul.mostread li {
  list-style-image: none;
  list-style-position: inside;
  list-style-type: disc;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 93%;
}
 
ul.latestnews, ul.mostread {
  margin-left: 0;
}

然后刷新网页,看看效果是否满意。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年09月28日 23:47 #3 作者: 安之若
谢谢白站,刚才把你写的代码加入后,把93%改成了110%(因为标题字数太少了),现在看着比之前分两行舒服多了。
有没有可能当鼠标在标题上时,就能出现完整标题 呢?

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年09月29日 00:04 #4 作者: Joomla之门
可以的。仍然通过 CSS 来实现。还是在刚才的 user.css 文件中,在末尾续写如下代码:
ul.latestnews li:hover, ul.mostread li:hover {
  text-overflow: clip;
  white-space: normal;
  width: 200%;
}

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年09月29日 09:34 #5 作者: 安之若
强大。是的,可以了。谢谢!
代码是不是很难学,居然这么神奇

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年09月29日 10:01 #6 作者: Joomla之门
学之则难者亦易也。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论