Home > Back-end >  text-break, word-break, all breaks do not work anymore for no apparent reason
text-break, word-break, all breaks do not work anymore for no apparent reason

Time：02-11

I had this issue fixed with text-break from bootstrap, but for some reason, something is overriding it and now my text does not wrap at all. I put a code snippet that reproduces the issue. I've tried everything and I am sure I am missing something silly. I'm only typing now because stackoverflow wants me to. You can ignore the next set of random thoughts.

.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 >
      <script id="counter40">1</script>
      <div >
        <div >
          <div >
            <img  src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <div>
              <div id="post_top"> jon </div>
              <div id="post_top2" ><span >in 3 hours</span><i ></i></div>
            </div>
          </div>
          <div id="three-dots" style="display: block" >
            <div >
              <div href="#" data-bs-toggle="dropdown"><i ></i></div>
              <div >
                <div id="post_edit_modal" style="display: block"  data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
                  <i > Edit</i>
                </div>

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

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

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

        <div >
          <div >
            <i id="upvote40"  style="color: gray;" onclick="vote(40,1)"></i>
            <span id="upvote_count_badge40" >0</span>
            <i id="downvote40"  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 ></i>
          </div>

          <div >
            <div  data-bs-toggle="dropdown"><i ></i></div>
            <ul >
              <p id="post_crosspost_modal"  data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
                <i > Cross Post</i>
              </p>
              <p id="copytoclipboard"  onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
                <i > Copy Link</i>
              </p>
              <p id="save_post"  onclick="save_post(40)">
                <i id="save_post_icon40" > Save</i>
              </p>
            </ul>
          </div>
        </div>

        <div >
          <div  id="load_replies40" onclick="loadReplies(40,0)"></div>
          <div  id="comment_collapse"> 1 comments</div>
        </div>

        <div >
          <div id="reply_loader40"><!--Append Replies Here-->
  <div >
    <script id="counter46">0</script>
    <img  src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
    <div style="width: 100%;">
      <div >
        <div >jon in 6 hours </div>
        <div >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 >
        <div >
          <i id="upvote46"  style="color: gray" onclick="vote(46,1)"></i>
          <span id="upvote_count_badge46" >0</span>
          <i id="downvote46"  style="color: gray" onclick="vote(46,0)"></i>
        </div>
        <div  id="reply46">Reply</div>
        <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
            <i ></i>
        </div>
      </div>

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

          <form id="submit_reply" autocomplete="off">
            <div >
              <img  src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
              <input  id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
              <div id="comment_input_error40" ></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>

CodePudding user response：

You used max-content for your width in your user container.

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

You can change that to 100%. You can learn more on 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/[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 >
    <script id="counter40">
      1
    </script>
    <div >
      <div >
        <div >
          <img  src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
          <div>
            <div id="post_top"> jon </div>
            <div id="post_top2" ><span >in 3 hours</span><i ></i></div>
          </div>
        </div>
        <div id="three-dots" style="display: block" >
          <div >
            <div href="#" data-bs-toggle="dropdown"><i ></i></div>
            <div >
              <div id="post_edit_modal" style="display: block"  data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
                <i > Edit</i>
              </div>

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

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

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


      <div >
        <div >
          <i id="upvote40"  style="color: gray;" onclick="vote(40,1)"></i>
          <span id="upvote_count_badge40" >0</span>
          <i id="downvote40"  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 ></i>
        </div>

        <div >
          <div  data-bs-toggle="dropdown"><i ></i></div>
          <ul >
            <p id="post_crosspost_modal"  data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
              <i > Cross Post</i>
            </p>
            <p id="copytoclipboard"  onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
              <i > Copy Link</i>
            </p>
            <p id="save_post"  onclick="save_post(40)">
              <i id="save_post_icon40" > Save</i>
            </p>
          </ul>
        </div>
      </div>

      <div >
        <div  id="load_replies40" onclick="loadReplies(40,0)"></div>
        <div  id="comment_collapse"> 1 comments</div>
      </div>

      <div >
        <div id="reply_loader40">
          <!--Append Replies Here-->
          <div >
            <script id="counter46">
              0
            </script>
            <img  src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <div style="width: 100%;">
              <div >
                <div >jon in 6 hours </div>
                <div >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 >
                <div >
                  <i id="upvote46"  style="color: gray" onclick="vote(46,1)"></i>
                  <span id="upvote_count_badge46" >0</span>
                  <i id="downvote46"  style="color: gray" onclick="vote(46,0)"></i>
                </div>
                <div  id="reply46">Reply</div>
                <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
                  <i ></i>
                </div>
              </div>

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

        <form id="submit_reply" autocomplete="off">
          <div >
            <img  src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <input  id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
            <div id="comment_input_error40" ></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>

Page link：https//www.codepudding.com/Backend/296868.html

Prev:Box-shadow and dynamic arrow position for custom select
Next:CryptographyDeprecationWarning: Python 2 is no longer supported by the Python core team
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding