How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS

How do you wrap long words on newline, and avoid horizontal scroll using CSS?

word-wrap: break-word

https://developer.mozilla.org/en/CSS/word-wrap

How to print wrapped text without horizontal scrollbar using bootstrap?

You need to break word (using word-break rule) to avoid horizontal scroll. By default long words without any space will not break/wrap to next line. Please see below example.

Since you are already using bootstrap you can avoid the custom class below and use bootstrap class text-break (documentation) instead of the custom class in example.

I have done 2 changes.

• Added a new class
• Removed class row which in your case dont need. You can have it but there should be a child col or col-* class.

.break-word {
 word-break: break-all;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container">
    <div class="row h-100" style="overflow-y:scroll; padding-left:17px; padding-right:17px">

            <div class="row flex-nowrap">
                <div class="col">
                    <div class="break-word">
                        https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
                        TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTE
                    </div>
                    <div>
                        sfdfsfdsdfdf
                    </div>
                </div>
                <div class="col-auto">
                    TEST Container
                    asddasdsaasdda
                </div>
            </div>

    </div>
</div>

Scroll horizontally and don't drop to the next line

Using flex, display: flex, will align horizontally your content (use flex-direction: column for vertical).

div{  overflow-x:scroll;  overflow-y:hidden;  display: flex;}
div img {  margin: 2px;}

<h1> Before </h1><div><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'><img src='http://via.placeholder.com/100x100'></div><h1> After </h1>

Line breaks and horizontal scrolling in html/css

The text inside the div will wrap to fit the div width when necessary. You can prevent this setiing white-space:nowrap;. See white-space.

Here you have an example https://jsfiddle.net/nmagq349/

Make text inside textarea not break to next line

You can do this by applying the css - white-space: nowrap rule.

textarea {
  white-space: nowrap;
}

<textarea></textarea>

---

Related Topics