回显变量时出现在设定宽度之外的文本

Question

我已经创建了一个页面，用户可以在其中查看图像以及图像描述，尽管我在描述CSS时遇到了一些问题。描述是通过PHP检索的，并显示为回显变量。这个问题的问题是，当描述内容应该在div中进行时，描述似乎沿着一条线进行。

如下图所示，当它应该在下面包裹到与描述下面的文本区域相同的宽度时，它会沿着一条线显示。

我已经尝试将.desc类的宽度更改为设置的像素宽度为290px而不是100％（仍然需要从image-desc类容器中获取290px）但我没有运气。

我目前的CSS：

 .image-info {
    width: 290px;
    display: inline;
    float: right;
}

.image-info .desc {
    text-align: justify;
    width: 290px;
    margin: 10px 0px;
}

和HTML：

<div class="image-info">
        <? $desc = htmlentities($row['desc'], ENT_QUOTES, 'UTF-8'); ?>
        <a href="gallery.php?id=<?php echo htmlentities($row['gallery'], ENT_QUOTES, 'UTF-8'); ?>">&larr; Back to Gallery</a>
        <div class="desc"><? echo $desc; ?></div>

        <? if(empty($_SESSION['user'])) { } else { print '<a href="#" class="show_hide"><i class="icon-chevron-down"></i>Options</a><br /><div class="slidingDes"><form action="admin/includes/edit-img.php?id=' . $id . '" method="post">  <textarea type="text" name="description" placeholder="' . $desc . '"></textarea> <br/><input type="submit" value="Change" class="btn btn-primary"/> </form><form action="admin/includes/cover-image.php?id=' . $id . '" method="post">  <input type="submit" value="Cover Photo" class="btn btn-danger"/> </form></div>';}?>
    </div>

Answer 1

当单词中没有空格时，您的内容似乎超出了限制 所以只需将word-wrap:break-word;添加到imageInfo类

这是你的css

 .image-info {
    width: 290px;
    display: inline;
    float: right;
    word-wrap:break-word;
}

在fiddle

中查看

Answer 2

添加新的CSS 3 word-break属性：

word-break: break-word; /* Will prevent text from bleeding outside container */

Answer 3

使用CSS3自动换行

word-wrap:break-word;

这将强制文本下降