split word as span and align in div

Question

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

Numeric id's are not allowed, and `mysql_*` extension has (finally) been deprecated. Also: A `DOMDocument` instance might be easier to work with according to some. You're also contiuously overwriting the value of `$content1`... honestly, there's a lot of issues here — Elias Van Ootegem, Jun 17 '13 at 07:19

caramba · Accepted Answer · 2013-06-17T07:43:42.023

1

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/

edited Jun 17 '13 at 07:43

answered Jun 17 '13 at 07:19

caramba

21,963
19
86
127

What about justify alignment? – KarSho Jun 17 '13 at 08:28
bummer about the justify alignment. why are you making spans? do you need them later for anything else? or could you do it like this without spans http://jsfiddle.net/GfVLP/27/ (word-spacing:XXX) – caramba Jun 17 '13 at 09:46
it is not possible to align:justify; spans. why are you using spans? can you use something else? – caramba Jun 17 '13 at 10:54

mhafellner · Answer 2 · 2013-06-17T07:25:38.623

0

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

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

edited Jun 17 '13 at 07:25

answered Jun 17 '13 at 07:19

mhafellner

458
3
9

score 0 · Answer 3 · answered Jun 17 '13 at 07:24

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.

score 0 · Answer 4 · answered Jun 17 '13 at 07:24

0

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

Fiddle

answered Jun 17 '13 at 07:24

billyonecan

20,090
8
42
64

[Have a look here](http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly) – billyonecan Jun 17 '13 at 07:34

split word as span and align in div

4 Answers4

Fiddle