2016-11-11 22 views
0

我想在div中显示一些文字来显示其全部内容。在我看来,这似乎毫不费力,但由于某种原因,我似乎无法得到它的工作。我尝试过的所有东西仍会在容器边缘收集文本。CSS - 在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; 
     } 
} 

回答

0

取下.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-titlewhitespace:no-wrap并设置为line-height.image-slide-title

+0

的空白:无包装是感谢您的帮助问题! –