0

誰かがスペースなしで長い文字列を配置した場合、文字列が画像の開始位置で壊れ、次のテキストが次の行に来るように、ページのテキスト説明を揃えたいと思います。実際に起きている様子の画像をアップしました。

ここに画像の説明を入力

これが私のコードです::

<div class="right">
<div class="all_content"  style="float: left; height:auto; padding:30px ;color:white;font-size:30px;line-height: 40px;word-break: break-word">  
    <div class="heading" style="width:760px">
        <?php
        $id=$_GET['id'];
        $RS = Run("SELECT firstname,lastname,description,img FROM info WHERE id='$id'");
        while($ROW = GetRow($RS))
        {
            echo $ROW['firstname'];
            echo " ";
            echo $ROW['lastname'];
        ?>
    </div>
    <div class="rt">
        <?php
        $path = 'images/uploaded/'.$ROW['img'];
        if(file_exists($path) && $ROW['img'] != "")
        {  
        ?>
        <img src="images/uploaded/<?php echo $ROW['img']?>"  width="380px" align="center" border="0" />
        <?php
        }
        else
            echo '<img src="images/uploaded/placeholder.png"  width="350px" align="center" border="0" />';
        ?>          
    </div>
        <?php
            echo "</br>";
            echo $ROW['description'];
            }
        ?>
</div>

CSS::

.right{
width:1260px;
height:1050px;
float:left;
background-color:#1e285d;
}
.heading{
width:830px;
height:100px;
float:left;
font-size: 100px;
line-height: 30px;
margin-bottom:35px;
}
.rt{
width:350px;
height:auto;
float:right;
padding-bottom: 20px;
padding-left: 20px;
font-size: 40px;
}

画像の下にその文字列を入れたくありません。見出しの下からすぐに開始する必要があります。誰もそんな馬鹿げた言葉をタイプしないことはわかっていますが、どうすればいいのか知りたいです。

4

3 に答える 3

0

説明に幅を設定できない場合は、php または javascript で文字列を手動で分割する必要があります。

PHP の場合:

echo wordwrap($description, 78, '- ');

それはあまりきれいではなく、非等幅フォントではうまく機能せず、明らかに78あなたにとっては異なるでしょう. また、ページの固定幅も想定しています。

より良いものが必要な場合は、javascript を使用して、要素の幅が許容される最大値を超えるまで繰り返し文字を要素に追加してから、スペースを追加することができます。

于 2013-09-28T12:55:25.490 に答える