Created List in the While Loop Breaks Out of the Div Wrapper

<?php
# This database request does get included into the file: knuffix_list_category_sort_automatic_1.php
# for the sake of printing the tags list.



# Printing of the tag names in ascending order by tag_id 

$db_connect = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

$sql_get = "SELECT DISTINCT tag_id, tag_name FROM tags ORDER BY tag_id ASC";

$sql_run = mysqli_query($db_connect, $sql_get);

# $sql_assoc_tag_id = mysqli_fetch_assoc($sql_run);

?>



<div id="labels">
    <a href="?cat=All">all</a>
<?php

while($sql_assoc = mysqli_fetch_assoc($sql_run)){
        
     echo '<u>|</u>' . '<a href="?cat=' . $sql_assoc['tag_id'] . '">' . $sql_assoc['tag_name'] . '</a>';
    
    


    
}

?>

</div>

The list created in the while loop is breaking out of the div wrapper, even though it should not. It should break into new lines at the side of the div wrapper.

What is causing it to not break at the side of the div wrapper? And how can I solve it?

This is not at all a PHP question, so I'm moving it to the HTML/CSS section.

Reply to this and paste the resulting HTML of this output, along with relevant CSS.  The PHP loop probably works fine, but none of this HTML is styled (and there's no div at all) so we need to see the actual HTML output.

I thought of it as not an HTML or CSS problem, that is the reason why I suspected the while loop for this case.

Take a look at the live example here: http://www.emoticonsymbols.net/model/contribution/knuffix_list.php?cat=All

The two series of tags above and below are in the exact same div with the exact same id="labels", though the lower one which is being printed off the while loop does break out.

Developer tools can be used for the HTML or CSS.

PHP outputs HTML. The browser interprets HTML. The browser does not even know of the existence of PHP - for all the browser knows, it could be a magic elf sending the HTML, or an .asp script, or perl, or PHP. So when you have a display issue, it's either css or html.

Post the output of your PHP script here.

I already posted it, do look at the link in the post above yours.

There's no whitespace in your output, so the browser cannot break because this is one long word.  Put a single space after your vertical pipe, and it will work fine.

What is a "vertical pipe"?

| is a vertical pipe.

Put a space in here:

echo '<u>|</u>'

Thanks a lot, I have to say that putting the space before the vertical pipe will work better because it will keep the vertical pipe with the tag together, they can both break apart at the breaking point if the space will be after the vertical pipe.

Wherever you put it, there needed to be a space.