如果没有放置空格，文本将离开我的列表组

Question

我正在创建一个论坛，我注意到我遇到的一个问题是，如果我在不使用空格的情况下持续发送垃圾邮件或单词，它只会与所有内容重叠，请参见下面的示例

我的标题有字符限制，body 但是 body 大概是 200，我真的不想缩短它。

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

Answer 1

您可以word-break:break-all;或word-break: break-word;

Answer 2

发生这种情况是因为您没有设置单词过大时的行为，只需将 word-break: break-all; 添加到您的 CSS

Answer 3

word-break就是你想要的CSS属性。它告诉浏览器在换行时应该在哪里中断你的文本。您遇到的问题是，默认情况下，浏览器会尝试保留“单词”。然而，如果你想像这个例子那样任意打断长字符串，那么你可以使用这个属性告诉浏览器通过 word-break: break-all 在 anywhere 打断它。

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

当然，问题是您最终可能会在奇怪的地方损坏实际的单词。请注意，Chinese/Japanese/Korean 文本也有特殊注意事项。它也有不错的browser support，除非你需要支持Opera Mini。

如果没有放置空格，文本将离开我的列表组

Text is leaving my list group if no spaces are put

css

bootstrap-5