0

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

如下所示，当它应该在下面换行到与描述下方的文本区域相同的宽度时，它会沿一行显示。

我尝试将 .desc 类的宽度更改为 290 像素而不是 100% 的设置像素宽度（仍应从 image-desc 类容器中获取 290 像素），但我没有运气。

文字扭曲

我当前的 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>
4

3 回答 3

1

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

这是你的CSS

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

看看这里的小提琴

于 2013-03-09T18:19:24.403 回答
0

使用 CSS3 自动换行

word-wrap:break-word;

这将迫使文本下降

于 2013-03-09T18:21:19.370 回答
0

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

word-break: break-word; /* Will prevent text from bleeding outside container */
于 2013-03-09T18:19:19.220 回答