0

説明のCSSに問題がありますが、ユーザーが画像の説明とともに画像を表示できるページを作成しました。説明はPHPを介して取得され、エコーされた変数として表示されます。これに関する問題は、div内で実行する必要があるときに、説明が1行に沿って実行されるように見えることです。

以下に示すように、説明の下のテキスト領域と同じ幅で下に折り返す必要がある場合は、1行に沿って表示されます。

.descクラスの幅を100％ではなく290pxの設定ピクセル幅に変更しようとしましたが（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>
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

新しいCSS3word-breakプロパティを追加します。

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

CSS3ワードラップを使用する

word-wrap:break-word;

これにより、テキストが強制的にダウンします

于 2013-03-09T18:21:19.370 に答える