Question

在my fiddle here中，我想将文本拆分为2行。拆分需要如下图所示：

分割需要根据图像的宽度。

我尝试使用word-break，但似乎需要定义容器的宽度。

有没有办法只使用CSS解决这个问题？

Answer 1

您可以使用display: table-caption属性使项目适合其容器已有的宽度而不拉伸它，并重置white-space以确保线条在太宽时实际断开：< / p>

span.item a{
    text-decoration: none;
    color: grey;
    text-align: center;
    display: table-caption;
    white-space: normal;
}

然后在vertical-align: top添加span.item，让它们排成一行。

小提琴：http://jsfiddle.net/n4c24cg7/4/

受this answer启发的答案。

Answer 2

）这应该可以解决问题：

div.items div{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.container {
  white-space:nowrap;
}
.item {
    width: 1%;
    display: inline-table;
    padding:0px 15px;
}
a {
    height: auto;
    overflow: hidden;
    text-decoration:none;
    white-space:normal;
}

http://jsfiddle.net/n4c24cg7/6/

填充物只是化妆品，顺便说一句，可随意调整。也许值得研究一下“省略号”属性以坚持布局：在这个方案中设置一个固定的高度将切断文本中的文本...取决于你指望的浏览器和图像后面的文字/标题的大小 - 现在它们与最高的一致;）希望这有助于

Answer 3

您可以从here

找到解决方案

  <div class="img">
     <img src="image/path/img" alt="">
    <div class="desc">Add a description of the image here blah blah blah</div>
    </div>

CSS

   div
   {
     width:100%;/*or specify width*/   
   }
   div.img {
    width:100%;
    }
    div.desc {
      margin: 5px;
      padding:5px;
      word-wrap:break-word;
    }

demo

包装未定义宽度的容器的文本

3 个答案: