Question

我试图在div中获取一些文本来显示其全部内容。在我看来，这似乎是一个明智的选择，但出于某种原因，我似乎无法让它发挥作用。我尝试过的所有东西仍然会在容器的边缘裁剪文字。

我认为word-wrap: break-word;可以做到这一点，但我没有运气。我花了不少时间来寻找并尝试不同的选项，所有这些都引导我完成这篇文章。

我不确定问题是由父对象设置的其他属性引起的，还是由Squarespace模板设置的默认属性引起的......

容器div有一个.margin-wrapper类，文本div有一个.image-slide-title类。

这就是我现在正在使用的https://cesare-asaro.squarespace.com/work。

CSS：

#portfolio  {
    background-repeat: repeat;
    background-color: rgba(239,93,85,1); 
      .margin-wrapper:hover { //for portfolio hovers
    position: relative;
      }  
      .margin-wrapper:after{ //for portfolio hovers
    border-radius: 100%;
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(255,255,255,0.5);
    opacity: 0;
    transition: all .7s;
    -webkit-transition: all .7s;
    transform: scale(0.935);
      }  
      img { //for portfolio hovers
    width: 100%;
    vertical-align: top;
      }
      .margin-wrapper:hover:after { //for portfolio hovers
    opacity: 1;
      } 
      .margin-wrapper:hover .image-slide-title{
    color: green;
      }
      .margin-wrapper{
    border: 1px solid red;    
      }
      .image-slide-title{  
    font-size: 76px;
    text-transform: uppercase;
    line-height: 10px;
        color:yellow;
        position: absolute;
        margin: -97%  3.25%;
        border: 1px solid red;
    height:93.5%;
    width: 93.5%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
       }
}

Answer 1

从whitespace:no-wrap移除.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title并为line-height

设置.image-slide-title

CSS - div

1 个答案: