为未定义宽度的容器换行文本答案

【问题标题】：Wrap text for container of undefined width为未定义宽度的容器换行文本
【发布时间】：2016-06-08 17:00:13
【问题描述】：

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

需要根据图片的宽度进行分割。

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

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

jsFiddle

【问题讨论】：

您必须以 px 或 % 为单位固定宽度。

标签： css word-wrap

【解决方案1】：

您可以使用display: table-caption 属性使项目适合其容器已有的宽度而不拉伸它，并重置white-space 以确保当它变得太宽时线条实际上会中断：

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启发的答案。

【讨论】：

有没有办法只用两行包装，溢出的文字可以用...表示？
不仅仅是 CSS。 text-overflow:ellipsis 仅适用于一行
display: table-caption?亲爱的上帝，我的一生都在哪里。

【解决方案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/

填充只是装饰性的，顺便说一下，可以随意调整。可能还值得研究 'ellipsis' 属性以坚持布局：在框上设置固定的高度将在这种情况下切断文本......取决于您所依赖的浏览器和文本的大小/caption 出现在图片之后——现在它们与最高的对齐；）希望这会有所帮助

【讨论】：

作为一个后注......能够水平滚动的真正破坏者是保持空白-nowrap包含在外部元素中，同时让你的文本在它应该的时候中断

【解决方案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

【讨论】：