CSS - 多行换行

Question

如果你能帮助我，我只想就以下问题获得一些指导。

基本上，如果我在图像描述中的文字过多，则会将图像向上推。处理此类问题最有吸引力的方式是什么？

谢谢。

我创建了一个基本的小提琴 - 重新调整窗口大小以使其内联

JSFiddle

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 30%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    display: inline-block;
    width: 15.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Answer 1

取决于您对有吸引力的解决方案意味着什么的概念，因为它尚未被提出。您可以使用文本溢出省略号。

div.desc {
    padding: 15px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Answer 2

对于未来的人们，我认为 flex 解决方案将真正帮助我。

我创建了以下 css 代码：

.file-wrapper {
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    display: flex;
}
.file-image {
    padding: 30px;
}

.file-box {
    text-align: center;
    padding: 1em;
    flex-basis: 10em;
    margin: 1em;
}

.fileTextWrapper {
    display: table;
    width: 100%;
    height: 3em;
}
.file-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

HTML 非常易于解释。包装器包含所有元素，然后我有法师及其描述的 div。通过这样做，它们不仅具有响应性，而且它们在中心对齐并且文本被很好地包裹。

Answer 3

您可以使用 flex 进行相同的方法更新下面的 css 部分

Update code

div.gallery {
    border: 1px solid #ccc;
    display:flex;
    justify-content:center;
    flex-flow:column nowrap;
    align-items:center;
    padding:10px;
} 

    div.gallery img {
    /* width: 30%; */
    height: auto;
}

div.gallery {
    border: 1px solid #ccc;
    display:flex;
    justify-content:center;
    flex-flow:column nowrap;
    align-items:center;
    padding:10px;
}
div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
   /* width: 30%; */
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    display: inline-block;
    width: 15.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

          
          
          <div class="responsive">
                <div class="gallery">
                        <img src="{{ asset('/img/zip.svg')}}"/>
                    <div class="desc">Description</div>
                </div>
        </div>
        
                 <div class="responsive">
                <div class="gallery">
                        <img src="{{ asset('/img/zip.svg')}}"/>
                    <div class="desc">Description Description</div>
                </div>
        </div>
        
                 <div class="responsive">
                <div class="gallery">
                        <img src="{{ asset('/img/zip.svg')}}"/>
                    <div class="desc">Description Description Description Description Description Description</div>
                </div>
        </div>
        
        

Answer 4

我会这样做：

div.gallery {
  border: 1px solid #ccc;
  min-height: 200px;
}

这将使所有框都相等。

Answer 5

您可以将 vertical-align: top; 添加到您的 .responsive div 中，这样所有 div 都会从顶部对齐。 检查下面的sn-p

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 30%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    display: inline-block;
    width: 15.99999%;
    vertical-align: top;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

          
          
<div class="responsive">
    <div class="gallery">
        <img src="{{ asset('/img/zip.svg')}}" />
        <div class="desc">Description</div>
    </div>
</div>

<div class="responsive">
    <div class="gallery">
        <img src="{{ asset('/img/zip.svg')}}" />
        <div class="desc">Description Description</div>
    </div>
</div>

<div class="responsive">
    <div class="gallery">
        <img src="{{ asset('/img/zip.svg')}}" />
        <div class="desc">Description Description Description Description Description Description</div>
    </div>
</div>