Question

我有一个位于div内的图像，以及图像的描述。

<div>
  <img src="pic.jpg">
  <span>Lorem ipsum dorus blablabla foo bar woo yay hoopla doo</span>
</div>

如果描述足够长，它会将div拉伸为比图像宽。在这种情况下如何进行描述换行？指定div的精确宽度，但遗憾的是图像大小不一，我无法提前知道宽度。

Answer 1

跨度是绝对定位的问题吗？ http://jsfiddle.net/d2GQa/

标记：

<div>
    <img src="picture.gif" alt="picture"/>
    <hr />
    <span class="cl-left">Text text text text text text text text text...</span>   
</div>

CSS：

div {
  background: red;
  float: left;
  position: relative;
}

span { 
  display: inline-block; 
  position: absolute; 
  width: 100%;
}

hr {
  clear: both;
  border: none;
  visibility: hidden;
  margin: 0;
  padding: 0;
}

Answer 2

<table>>
  <caption align=bottom>Lorem ipsum dorus blablabla
    foo bar woo yay hoopla doo</caption>
  <tr><td><img src="pic.jpg">
</table>

默认情况下，标题文本将水平居中，但可以使用CSS左对齐。对于其他方法，以及解释为何效果最佳，请参阅http://www.cs.tut.fi/~jkorpela/www/captions.html

Answer 3

$(document).ready( function() {

if(your_condition)
{
    // Enable word-wrapping
    $("span").wordWrap('on');
}else
{
    // Disable word-wrapping
    $("span").wordWrap('off');
}
});

<div>
    <img src="pic.jpg"> 
    <span>Lorem ipsum dorus blablabla foo bar woo yay hoopla doo</span>
</div>

Answer 4

我没有在短时间内找到没有 javascript的解决方案。如果你想知道浮子：它是关于收缩到适合的。 http://jsfiddle.net/3Qucb/1/

当我不知道父元素的宽度时如何启用自动换行

4 个答案: