Question

我使用PHP从MySQL获取段落值。我需要显示this link。我的代码是，

<?php
        $sql = "select `content` from `content` where id='1'";
        $data = mysql_query($sql);

    while($row = mysql_fetch_array($data))
    {
        $content1 = $row[0];
    }
    $content2 = explode(" ", $content1);
    $content = "";
    $count = 1;
    foreach($content2 as $content3)
    {
        $content .= '<span id='.$count.' >'.$content3.'</span>';
        $count++;
    }

    echo "<div class='data_pre'>";
    echo $content;
    echo "</div>";
?>

我需要跨越每一个字。但它显示了相同的一行。这不是下一行。请参阅the link。

哪里有问题？感谢...

Answer 1

哦，对不起，有：“它没有显示下一行”我确信你想把新单词放在新行上。试试这个：http://jsfiddle.net/GfVLP/13/

.data_pre span {
    display:inline-block;
    margin-right:10px;
}

http://jsfiddle.net/GfVLP/2/

你必须使用

   .data_pre span {
       display:block;
    }

因为span是内联元素

这里有更新，高度：140px;对于父母div而言，事情并非一切都在显现 http://jsfiddle.net/GfVLP/12/

Answer 2

将word-wrap: break-word;添加到您的CSS中！

工作小提琴：http://jsfiddle.net/ha2At/

Answer 3

只能用CSS完成。

为此，您需要在跨度中添加display:inline-block以在行后面移动它并获取跨度内容的空间，您需要向跨度声明:after。

这是WORKING SOLUTION。

守则：

.data_pre span{display:inline-block;} /* To make the span wrap down after the line */
.data_pre span:after{content:'\0000a0';} /* To add a space in between the lines */

希望这有助于。

Answer 4

.data_pre span {
  display: inline-block;
  margin: 1px;
}

将单词拆分为span并在div中对齐

4 个答案:

Fiddle