'text-break, word-break, all breaks do not work anymore for no apparent reason
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 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>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|