1

私はアメリカン フットボール チームのウェブサイトに取り組んでいます。彼らは、CMS システムを通じて管理できるフロント ページにこれらのニュースサイトを持っています。これらのニュース項目内のテキストの配置に問題があります。2 つのニュース項目は次のようになります。

ここに画像の説明を入力

ご覧のとおり、正しいニュースサイトのテキストがうまく表示されています。しかし、左はそれを本当にひどくカットします。最後の文のテキストの上半分しか見えません。私はoverflow: hidden;を使用しています。テキストによって div や newsitem が大きくならないようにします。HTMLとCSSでこれを解決する方法を知っている人はいますか、それともPHPでサーバーサイドを切り離す必要がありますか?

ここに私のコード（HTML）があります：

<div class="newsitem">
        <div class="titlemessagewrapper">
            <h2 class="titel" align="center"><?php echo $row['homepagetitel']; ?></h2>
            <div class="newsbericht">
                <?php echo $row['homepagebericht']; ?>
            </div>
        </div>
        <div class="newsfooter">
            <span class="footer_author"><a href=""><?php echo get_gebruikersnaam_by_id($row['poster_id']); ?></a></span> <span class="footer_comment"><a href="">Comments <span>todo</span></a></span>
            <a href="" class="footer_leesmeer">Lees meer</a>
        </div>
    </div>

CSS は次のとおりです。

.newsitem{
float: left;
height: 375px;
width: 296px;
margin: 20px 20px 0px 20px;
background-color: #F5F5F5;

}

.newsitem .titel{
color:#132055;
font-size:1.2em;
line-height:1.3em;
font-weight:bold;
margin:10px 5px 5px 5px;
padding:0 0 6px 0;
border-bottom:1px dashed #9c0001;
}

.titlemessagewrapper{
height: 335px;
overflow: hidden;
}

.newsitem .newsbericht{
padding:5px 5px 5px 5px;
font-size: 0.8em;
margin-bottom: 5px;
}

.newsitem .newsfooter{
width: 100%;
height: 25px;
background-color: #132055;
margin: 0px auto;
font-size: 0.8em;
padding-top: 5px;
margin-top: 10px;
border: 1px solid #9c0001;
}
4

3 に答える 3

2

ユーザーが入力することに依存しないでください<cut>。

  • ユーザー入力 = エラー
  • ユーザーが を入力し忘れた場合はどうなります<cut>か? あなたのニュース アイテムはプロらしくありませんか?
  • ユーザーがニュース項目を作成して、その一部が切り取られていることを発見する意味は何ですか?

div が固定文字列長にしか収まらない場合は、に依存するのではなく、ニュース アイテムの入力本文の最大長を検証する必要があります<cut>。これは、属性を使用して簡単に実現できmaxlengthます。

<textarea id="userinput" maxlength="150">Enter your news</textarea>

使用する場合は、カットタグが存在しない場合にコンテンツが専門外に表示されないようにするために<cut>も追加する必要があります.overflow: hidden;

すべてのテキストを表示し、div を同じ固定高さに保ちたい場合

交換

overflow: hidden;

と

overflow:auto;

(コンテンツが div より小さい場合、スクロール バーは表示されません)

それ以外の場合は、div 内の文字列/コンテンツの長さを検証するか、CSS の高さ属性を削除して、すべてのコンテンツがスクロール バーなしで表示されるようにします。

お役に立てれば

于 2012-11-02T10:47:17.940 に答える
1

ボックスを同じ高さにしたい場合: 文字列全体を取得し、 substrを実行して新しい変数に保存し、それをエコーし​​ます。

例えば。

<?php
    $str = "abcdefghijkl";
    $new_strsubstr($str, 0, 8);  // abcdef
    // will return abcdefhi 
?>
于 2012-11-02T10:38:48.367 に答える
1

.titlemessagewrapper の高さ属性を削除します。カットオフを引き起こしているこの高さ属性。

于 2012-11-02T10:38:06.767 に答える