【发布时间】:2018-03-22 21:59:20
【问题描述】:
我正在使用 CSS 和 position:absolute 来强制使用 Squarepace 中未提供的摘要标题叠加功能。这些是我遇到的问题:
将包含 5 张图片的摘要的宽度设置为 20%,我认为会完全覆盖图片,但每个图片叠加层之间存在间隙。有没有办法使它等于它所来源的摘要图像的 with?
其次,我试图让 truncate 属性截断行尾的文本,但我也无法获取它。
这是我正在处理的网站:页面底部的http://www.sunsetstudiosent.com。
这是我目前使用的代码:
.sqs-block-summary-v2 .summary-content {
text-align: left;
position: absolute;
bottom: 0px;
padding: 5px;
margin: 0;
height: 50px;
width: 20%;
text-overflow: ellipsis;
background: rgba(39,39,39,0.5); /* colour of background behind the title and excerpt */
}
.summary-title-link{
text-overflow: ellipsis;
width: 20%;
color: rgba(249,249,249,1) !important; /* color of title links */
}
.sqs-block-summary-v2 .summary-block-setting-show-title .summary-thumbnail-container{
margin-bottom: 0 !important; /* fix to bottom of thumbnail */
overflow: hidden; /* hide anything that doesn't fit */
}
【问题讨论】:
-
如果你想让
text-overflow: ellipsis;工作,你必须添加white-space: nowrap; overflow: hidden;。 CSS text-overflow property -
white-space: nowrap; overflow: hidden;有效,但text-overflow: ellipsis;无效 -
您是否尝试在
;之前添加!important,以防这些属性已被定义? -
@Charles.C 是的,我也这样做了。
-
在这种情况下,恐怕这超出了我的能力范围,无法帮助您。 (我仍然是这一切的新手......)。祝你好运!
标签: css overflow overlay summary squarespace