想让文本在 div 内换行

Question

在下面的代码中，我有 3 张图片，其中一些图片下方有一个标题。我不希望文本的宽度超过图像的宽度。注意：图像的宽度可能会有所不同。它不是固定宽度。如果文本超出图像的宽度，则文本需要换行。我在下面的代码中遇到的另一个问题是第二个和第三个图像在图像底部显示了一些填充。此图像周围的边框不应有填充。

http://jsfiddle.net/AndroidDev/Asu7V/15/

<div style="width:300px; overflow-x: auto;white-space: nowrap;">
    <div style="vertical-align:top">
        <div class="x">
            <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
            <div style="white-space:wrap">Grumpy Cat is a famous cat</div>
        </div>
        <div class="x">
            <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
            <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
        </div>
        <div class="x">
            <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
        </div>
    </div>
</div>

Answer 1

由于您没有将任何 width 分配给您的 div 元素，因此请分配它，而不是使用 white-space: normal;

<div style="white-space: normal; width: 130px;">Grumpy Cat is a famous cat</div>

Demo

再次提醒您，避免使用内联样式..

另外，当您修复仅包含图像的包装器div 时，最好将max-width 和max-height 用于您的img，这样可以确保它不会overflow。

此外，最后但并非最不重要的一点是，考虑使用 p 元素而不是 div，这将为您的文本赋予一些语义意义。

---

您使用的是white-space: wrap;，其中wrap 不是white-space 属性的有效值，因此您需要normal

---

正如您评论的那样，您希望摆脱两边的空白，因此，通过为包装元素分配一些固定的width 来修复包装元素，对于图像问题下方的空白，可以可以通过在包装元素上使用 font-size: 0; 而不是为文本分配一些 font-size 来修复，或者更好的方法是将 display: block; 用于您的 img 元素。

Answer 2

一种简单的方法是将您的图像和文本包装在一个 div 中，这样当您的图像大小增加时，它也会为文本提供相同的流动区域，并且不会超出图像范围。

Answer 3

你的 CSS 缺少宽度，这是一个演示： DEMO

HTML

<div style=""><span class="text">Grumpy Cat is a famous cat</span>

CSS

 .text {
        vertical-align:top;
        display:inline-block;
        white-space:normal;
        word-wrap: break-word;
        width:70%;
        max-width:70%;
    }
    .x {
        border:1px solid #000000;
        display:inline-block;
        white-space:nowrap;
        position:relative;
        width:42%;
        vertical-align: top;
    }