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

Without being able to put a width on the description you would have to manually split the string in php or in javascript.

In PHP:

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

That won't be very pretty and it won't work well with non-monospaced fonts and obviously the 78 would be different for you. It also assumes a fixed width on the page.

If you wanted something better you could use javascript to iteratively add characters to an element until its width goes over the maximum allowed and then add in a space.

于 2013-09-28T12:55:25.490 回答
0

将图像放在文本中，并为float:right;图像和word-break:break-all;texr赋予样式

于 2013-09-28T12:11:56.383 回答
0

您可以使用 css 属性 word-break http://www.w3schools.com/cssref/css3_pr_word-break.asp

于 2013-09-28T12:09:03.650 回答