text-break，word-break，所有中斷都不再起作用，沒有明顯的原因-有解無憂

我用 bootstrap 的 text-break 解決了這個問題，但由于某種原因，有些東西覆寫了它，現在我的文本根本不換行。我放了一個重現問題的代碼片段。我已經嘗試了一切，我確信我錯過了一些愚蠢的東西。我現在才打字，因為 stackoverflow 想讓我這樣做。您可以忽略下一組隨機想法。

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

uj5u.com熱心網友回復：

您用于容器max-content中的寬度。user

max-content sizing 關鍵字表示內容的固有最大寬度或高度。對于文本內容，這意味著即使導致溢位，內容也不會換行。-MDN

您可以將其更改為100%. max-content 您可以在此處了解更多資訊。

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429619.html

標籤：html css 推特引导风格

上一篇：第一次滾動到選單時，如何使選單“粘”到頂部？

下一篇：Bootstrap動態附加的按鈕組未正確取消選擇