【问题标题】:Class Equal to Another Class类等于另一个类
【发布时间】: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


【解决方案1】:

设置后问题似乎消失了:

    .summary-content {
         width: 20.2%;
     }

我看到您的课程“sql-gallery-design-carousel-slide”也将其宽度设置为 20.2%。

【讨论】:

  • 这怎么可能呢? 5 x 20% 是 100%?还有什么关于截断文本的吗?
  • 是否可以将类设置为等于类的宽度,以便它改变它会自动调整?
  • @ThisGuy 不,这是不可能的,至少在纯 CSS 中是不可能的。
  • 用一些 javascript 或 jquery 怎么样?
  • @ThisGuy 确信这是可能的并且不是很困难。尽管我对 Javascript 太陌生,无法向您描述如何这样做。在我看来,你真的应该尝试修改你的 HTML 或 CSS 以摆脱你的问题。用 Javascript 做这样的事情就像用锤子砸苍蝇一样,这是可能的,但不是很合适。 :)
猜你喜欢
  • 2010-10-03
  • 1970-01-01
  • 2023-03-21
  • 2012-01-05
  • 2022-01-23
  • 1970-01-01
  • 1970-01-01
  • 2014-05-07
  • 1970-01-01
相关资源
最近更新 更多