无明显原因，文本中断、单词中断、所有中断不再起作用

Question

我用 bootstrap 中的文本中断修复了这个问题，但出于某种原因，某些东西覆盖了它，现在我的文本根本没有换行。我放了一个重现问题的代码片段。我已经尝试了一切，我确信我错过了一些愚蠢的东西。我现在只是在打字，因为 Whosebug 要我打字。下一组胡思乱想可以忽略。

.comment_input{
    padding: 5px;
    margin: 5px;
    border-radius: 8px;
    border: none;
    width: 100%;
}

.profile-name{
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.post{
    margin: 10px auto;
    width: 80%;
    border-radius: 3px;
    background: darkgray;
}

.post_padding{
    margin: 5px;
}

.post_comment{
    display: flex;
    align-items: center;
    gap: 5px;
}

.post_top{
    display: flex;
    justify-content: space-between;
}

.hover:hover {
    cursor: pointer;
}

.like-and-comment{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    align-items: center;
    padding: 5px;
}

.view-more{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.lk{
    display: flex;
    font-size: 14px;
    gap: 5px;
}

.right{
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-left-radius: 30px;
    width: 5%;
    top: 5px;
    position: absolute;
    height: 120%;
    left: -20px;
}

.reply {
    display: flex;
    gap: 10px;
}

.reply-body{
    word-wrap    : break-word;
    overflow-wrap: break-word;
}

.user{
    /* TODO fix text overflow for when no spaces added*/
    background: grey;
    padding: 8px;
    border-radius: 20px;
    /*TODO max variable based on content*/
    width: max-content;
    word-wrap    : break-word;
    overflow-wrap: break-word;
}

.like-comment, .reply_comment{
    cursor: pointer;
}

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>

<div class="post">
      <script id="counter40">1</script>
      <div class="post_padding">
        <div class="post_top">
          <div class="profile-name">
            <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <div>
              <div id="post_top"> jon </div>
              <div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
            </div>
          </div>
          <div id="three-dots" style="display: block" class="hover">
            <div class="dropdown">
              <div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
              <div class="dropdown-menu">
                <div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
                  <i class="bi bi-pencil-square"> Edit</i>
                </div>

                <div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
                  <i class="bi bi-eye-slash"> Ban</i>
                </div>
                <div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
                  <i class="bi bi-clock-history"> History</i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--this is really the post-->
        <div class="media ">
          <div class="text-break" id="post_body">hi</div>
          <img id="media_graphic">
        </div>

        <!--Finish this, need media link, media article-->
        

        <div class="like-and-comment">
          <div class="d-flex align-items-center">
            <i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
            <span id="upvote_count_badge40" class="badge bg-secondary">0</span>
            <i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
          </div>
        
          <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
              <i class="fas fa-award hover"></i>
          </div>

          <div class="dropdown hover">
            <div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
            <ul class="dropdown-menu">
              <p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
                <i class="bi bi-signpost-2"> Cross Post</i>
              </p>
              <p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
                <i class="bi bi-clipboard"> Copy Link</i>
              </p>
              <p id="save_post" class="dropdown-item" onclick="save_post(40)">
                <i id="save_post_icon40" class="bi bi-save"> Save</i>
              </p>
            </ul>
          </div>
        </div>

        <div class="view-more">
          <div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
          <div class="hover" id="comment_collapse"> 1 comments</div>
        </div>

        <div class="comment">
          <div id="reply_loader40"><!--Append Replies Here-->
  <div class="lk">
    <script id="counter46">0</script>
    <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
    <div style="width: 100%;">
      <div class="user">
        <div class="reply_author">jon in 6 hours </div>
        <div class="reply-body">word-wrap    : break-word; overflow-wrap: break-word;word-wrap    : break-word; overflow-wrap: break-word;word-wrap    : break-word; overflow-wrap: break-word;word-wrap    : break-word; overflow-wrap: break-word;</div>
      </div>
      <div class="reply">
        <div class="d-flex align-items-center">
          <i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
          <span id="upvote_count_badge46" class="badge bg-secondary">0</span>
          <i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
        </div>
        <div class="reply_comment" id="reply46">Reply</div>
        <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
            <i class="fas fa-award hover"></i>
        </div>
      </div>

      <form id="submit_reply46" style="display: none;" autocomplete="off">
        <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
        <input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
        <div id="comment_input_error46" class="invalid-feedback"></div>
      </form>
      <div id="reply_loader46"><!--Nested Replies go here--></div>
    </div>
  </div>
</div>

          <form id="submit_reply" autocomplete="off">
            <div class="post_comment">
              <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
              <input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
              <div id="comment_input_error40" class="invalid-feedback"></div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

Answer 1

您在 user 容器中使用 max-content 作为宽度。

The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. -MDN

您可以将其更改为 100%。您可以在 max-content here.

上了解更多信息

.comment_input {
  padding: 5px;
  margin: 5px;
  border-radius: 8px;
  border: none;
  width: 100%;
}

.profile-name {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.profile_image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.post {
  margin: 10px auto;
  width: 80%;
  border-radius: 3px;
  background: darkgray;
}

.post_padding {
  margin: 5px;
}

.post_comment {
  display: flex;
  align-items: center;
  gap: 5px;
}

.post_top {
  display: flex;
  justify-content: space-between;
}

.hover:hover {
  cursor: pointer;
}

.like-and-comment {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  align-items: center;
  padding: 5px;
}

.view-more {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.lk {
  display: flex;
  font-size: 14px;
  gap: 5px;
}

.right {
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  border-bottom-left-radius: 30px;
  width: 5%;
  top: 5px;
  position: absolute;
  height: 120%;
  left: -20px;
}

.reply {
  display: flex;
  gap: 10px;
}

.reply-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.user {
  /* TODO fix text overflow for when no spaces added*/
  background: grey;
  padding: 8px;
  border-radius: 20px;
  /*TODO max variable based on content*/
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.like-comment,
.reply_comment {
  cursor: pointer;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link href="/static/css/style.css" rel="stylesheet">
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>

  <div class="post">
    <script id="counter40">
      1
    </script>
    <div class="post_padding">
      <div class="post_top">
        <div class="profile-name">
          <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
          <div>
            <div id="post_top"> jon </div>
            <div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
          </div>
        </div>
        <div id="three-dots" style="display: block" class="hover">
          <div class="dropdown">
            <div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
            <div class="dropdown-menu">
              <div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
                <i class="bi bi-pencil-square"> Edit</i>
              </div>

              <div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
                <i class="bi bi-eye-slash"> Ban</i>
              </div>
              <div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
                <i class="bi bi-clock-history"> History</i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--this is really the post-->
      <div class="media ">
        <div class="text-break" id="post_body">hi</div>
        <img id="media_graphic">
      </div>

      <!--Finish this, need media link, media article-->


      <div class="like-and-comment">
        <div class="d-flex align-items-center">
          <i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
          <span id="upvote_count_badge40" class="badge bg-secondary">0</span>
          <i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
        </div>

        <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
          <i class="fas fa-award hover"></i>
        </div>

        <div class="dropdown hover">
          <div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
          <ul class="dropdown-menu">
            <p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
              <i class="bi bi-signpost-2"> Cross Post</i>
            </p>
            <p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
              <i class="bi bi-clipboard"> Copy Link</i>
            </p>
            <p id="save_post" class="dropdown-item" onclick="save_post(40)">
              <i id="save_post_icon40" class="bi bi-save"> Save</i>
            </p>
          </ul>
        </div>
      </div>

      <div class="view-more">
        <div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
        <div class="hover" id="comment_collapse"> 1 comments</div>
      </div>

      <div class="comment">
        <div id="reply_loader40">
          <!--Append Replies Here-->
          <div class="lk">
            <script id="counter46">
              0
            </script>
            <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <div style="width: 100%;">
              <div class="user">
                <div class="reply_author">jon in 6 hours </div>
                <div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
              </div>
              <div class="reply">
                <div class="d-flex align-items-center">
                  <i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
                  <span id="upvote_count_badge46" class="badge bg-secondary">0</span>
                  <i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
                </div>
                <div class="reply_comment" id="reply46">Reply</div>
                <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
                  <i class="fas fa-award hover"></i>
                </div>
              </div>

              <form id="submit_reply46" style="display: none;" autocomplete="off">
                <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
                <input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
                <div id="comment_input_error46" class="invalid-feedback"></div>
              </form>
              <div id="reply_loader46">
                <!--Nested Replies go here-->
              </div>
            </div>
          </div>
        </div>

        <form id="submit_reply" autocomplete="off">
          <div class="post_comment">
            <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
            <div id="comment_input_error40" class="invalid-feedback"></div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

无明显原因，文本中断、单词中断、所有中断不再起作用

text-break, word-break, all breaks do not work anymore for no apparent reason

html

css

styles

twitter-bootstrap