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

I'm getting paragraph value from MySQL using PHP. I need to display like this link. My code is,

<?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>";
?>

I need span for every word. But It showing same one line. It's not coming next line. See the link.

Where is problem? Thanks...

duanchuiwen6694
duanchuiwen6694 这些ID在HTML5中有效
大约 7 年之前 回复
dt888999
dt888999 不允许使用数字ID,并且(最终)不推荐使用mysql_*扩展名。另外:一些DOMDocument实例可能更容易使用。你也不断地覆盖$content1的价值......老实说,这里有很多问题
大约 7 年之前 回复

4个回答



哦,对不起,有:</ strong>“它没有显示下一行”我确信你想拥有每一行 在新的一行上的字。 试试这个: http://jsfiddle.net/GfVLP/13/ </ p>
\ n

  .data_pre span {
display:inline-block;
margin-right:10px;
}
</ code> </ pre>

http://jsfiddle.net/GfVLP/2/ </ p>

你有 使用</ p>

  .data_pre span {
display:block;
}
</ code> </ pre>

因为span是一个 inline-element </ p>

这里有更新,高度:140px; 对于父div而言,并非一切都在显示
http://jsfiddle.net/GfVLP/12/ </ p>
</ div>

展开原文

原文

ooh, sorry, with: "its not showing next line" I was sure you want to have every word on a new line. try this: http://jsfiddle.net/GfVLP/13/

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

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

you have to use

   .data_pre span {
       display:block;
    }

because span is an inline-element

and here an update, the height:140px; to the parent div was the matter that not everything was showing http://jsfiddle.net/GfVLP/12/

dongmaonao0505
dongmaonao0505 不可能对齐:对齐; 跨越。 你为什么要使用跨度? 你能用别的东西吗?
大约 7 年之前 回复
dongqing7789
dongqing7789 我需要与对齐的跨度
大约 7 年之前 回复
dongna1593
dongna1593 关于正确对齐的可能性。 你为什么要跨越? 你以后还需要其他什么吗? 或者你可以这样做,没有跨度jsfiddle.net/GfVLP/27(字间距:XXX)
大约 7 年之前 回复
dousha1831
dousha1831 如何证明对齐?
大约 7 年之前 回复



只能用CSS完成。</ p>

为此您需要添加显示:内联块</ code>到跨度以在行之后漂移并获得跨度内容的空间,您需要声明:after </ code>到span。</ p >

以下是工作解决方案。</ p>

代码:</ strong> </ p>

  .data_pre span {display:inline-block;} / 在行之后缩小范围 /
.data_pre span:在{content:'\ 0000a0';;} / 之后在行之间添加一个空格 /
</ code> </ pre>

希望这有助于。 </ p>
</ div>

展开原文

原文

It can be done with CSS only.

For that you need to add a display:inline-block to the span to drift it after the line and to get the space on the span contents, you need to declare an :after to the span.

Here is the WORKING SOLUTION.

The Code:

.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 */

Hope this Helps.

dtt83024
dtt83024 但文字对齐?
大约 7 年之前 回复



  .data_pre span {
display:inline-block;
margin:1px;
}
</ 代码> </ pre>

小提琴 </ h3>
</ DIV>

展开原文

原文

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

Fiddle

dongshanya2008
dongshanya2008 看看这里
大约 7 年之前 回复
du229908
du229908 但文字对齐?
大约 7 年之前 回复



word-wrap:break-word; </ code>添加到CSS中!</ p>

工作小提琴: http://jsfiddle.net/ha2At/ </ p>
< / DIV>

展开原文

原文

Add word-wrap: break-word; to your CSS!

The working fiddle: http://jsfiddle.net/ha2At/

doushi5024
doushi5024 对不起..请参阅jsfiddle.net/GfVLP/11
大约 7 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐