Text is leaving my list group if no spaces are put

Question

I am creating a forum and i noticed one issue im having is that if i spam letters or words consistently without using spaces it just overlaps everything ill show a example below

i have a character limit on my title and body but for body its like 200 and i dont really want to shorten that.

<html lang="nl">
    <head>
        <title>WilliamOverman</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/css/style.css">
        <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>
    <body>
        <?php 
        include 'assets/header.php';
        require_once('assets/getInfo.php');
        ?>
        <div class="container">
            <div class="row">
                <div class="container col-md-6" style="margin-top: 1rem">
                    <?php
                    foreach (getPost()['posts'] as $item) {
                        echo "  <div class='list-group' style='font-family: Quicksand; margin-top: .5rem'>
                                    <a href='post?msgid=" . $item['id'] . "' class='list-group-item list-group-item-action' aria-current='true'>
                                        <div class='d-flex w-100 justify-content-between'>
                                            <h5 class='mb-1'> " . $item['titel'] . " </h5>
                                            <small>" . $item['bericht_create_date'] . "</small>
                                        </div>
                                        <p class='mb-1'>" . $item['bericht'] . "</p>
                                        <small>Posted by " . $item['username'] . "</small>
                                    </a>
                                </div>";
                    }
                    echo "
                    <div class='container col-md-8 text-center justify-content-center' style='margin-top: .5rem;'>
                        <a class='btn btn-primary' role='button' href='forum?page=1'><<</a>
                        <a class='btn btn-primary' role='button' href='" . prevpage() . "'><</a>
                        <a class='btn btn-primary' role='button' href='" . nextpage() . "'>></a>
                        <a class='btn btn-primary' role='button' href='" . lastpage() . "'>>></a>
                    </div>
                    ";
                    ?>
                </div>
                <?php
                if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) {
                    echo 
                    "<div class='container col-md-3' style='margin-top: 1rem'>
                    <form method='post' action='assets/postAddHandler'>
                        <div class='form-group'>
                            <label for='formGroupExampleInput'>Titel</label>
                            <input type='text' name='titel' class='form-control' id='formGroupExampleInput' placeholder='Example input'>
                        </div>
                        <div class='form-group'>
                            <label for='exampleFormControlTextarea1'>Bericht</label>
                            <textarea class='form-control' name='bericht' id='exampleFormControlTextarea1' rows='3'></textarea>
                        </div>
                        <div class='form-group'>
                            <label for='exampleFormControlFile1'>Foto</label>
                            <input type='file' name='foto' class='form-control-file' id='exampleFormControlFile1'>
                        </div>
                        <div class='form-group' style='margin-top: .5rem'>
                            <button type='submit' name='addPost' class='btn btn-success'>Add post</button>
                        </div>
                    </form>
                    </div>
                    ";
                }
                ?>
            </div>  
        </div>
    </body>
</html>

score 1 · Accepted Answer · answered Mar 07 '22 at 20:05

1

That happens because you haven't set behavior for when a word is too large, just add word-break: break-all; to your CSS

answered Mar 07 '22 at 20:05

score 0 · Answer 2 · answered Mar 07 '22 at 20:00

0

You can word-break:break-all; or word-break: break-word;

answered Mar 07 '22 at 20:00

Ali Karaarslan

46
3

score 0 · Answer 3 · answered Mar 07 '22 at 20:13

word-break is the CSS property that you want. It tells the browser where it should break your text when wrapping. The problem you're having is that, by default, the browser tries to leave "words" in place. However if you want to arbitrarily break long strings of text like this example, then you can use this property to tell the browser to break it anywhere via word-break: break-all.

#word-break {
  word-break: break-all;
}

.list-group {
  font-family: Quicksand serif;
  margin-top: 0.5rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="list-group" id="word-break">
  <a href="#" class="list-group-item list-group-item-action" aria-current="true">
    <div class='d-flex w-100 justify-content-between'>
      <h5 class='mb-1'> Example with word-break </h5>
      <small>Today</small>
    </div>
    <p class='mb-1'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
    <small>Posted by "Bob"</small>
  </a>
</div>

The problem is, of course, that you could end up with actual words being broken in strange places. Note that there are special considerations for Chinese/Japanese/Korean text as well. It also has pretty good browser support, unless you need to support Opera Mini.

Text is leaving my list group if no spaces are put

3 Answers3