[CSS] Text overflowing from containers

[CSS] Text overflowing from containers - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: [CSS] Text overflowing from containers (/showthread.php?tid=5387295)

[CSS] Text overflowing from containers - SIM-1809171 - Aug 26, 2016

Hey

So I'm working on a site using bootstrap as a base.

I've never had problems with responsive design in the past as a result of using bootstrap however for the first time every im having issues.

Basically scaling my site down in browser works fine till I get as thin as it will possibly go (or mobile sized). When this happens, my text begins to overflow (as seen http://m.imgur.com/F6x67gq)

Now in this photo, the grey above is supposed to stretch with the text howoverit overflows. As a short term fix I'm going to hide overflows but in the long term,

What's the best practice to make divs stretch to full height of the text?

EDIT::::

the div resizes a lot up until a certain point then it just jumps and all the text jumps out the div

[Image: KR9HeVh.png?1]

* - Dinastia- - Aug 26, 2016

Well, If I understand the question, a simple HTML div tag, with default CSS properties, does the job that you want, make divs stretch to full height of the text.

Like: //jsfiddle.net/apt6csj5/

Judging the situation from an image is difficult, but probably, the problem is that you use a fixed height for the grey div.
Using a div with fixed height, basing the height on the text inside, it's not the best approach. Because the text, according to the resolution of the monitor, it's "broken/wraps" in different points, making the height different from resolution to resolution.

If you had a live demo of the problem, it would make simplest the search of the solution.

* - Two-Ton 21 - Aug 27, 2016

Put min-width: 200px; max-width: 100% !important; in your container's css.

* - SIM-1809171 - Aug 27, 2016

Ive updated the OP but basically, the div resizes a lot up until a certain point then it just jumps and all the text jumps out the div

* - Two-Ton 21 - Aug 27, 2016

You're not laying your grid out properly. http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

* - SIM-1809171 - Aug 28, 2016

(Aug 27, 2016 03:51 PM)Usul Wrote: You're not laying your grid out properly. http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Thi is the code.

Im sure its laid out correctly.

http://pastebin.com/LhSY3D4i

* - Two-Ton 21 - Aug 28, 2016

You'll be needing separate tags for the grids response when shrinking. Later when I can get on a computer, I'll try laying out an example.

* - SIM-1809171 - Aug 29, 2016

(Aug 28, 2016 10:34 AM)Usul Wrote: You'll be needing separate tags for the grids response when shrinking. Later when I can get on a computer, I'll try laying out an example.

Cheers mate looking forward to reading it

* - Two-Ton 21 - Aug 29, 2016

Here's what I came up with.

Code 
Here's what I came up with.

[code]

<!doctype html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

        <section class="video-block text-center fullsize">

            <div class="container">

                <div class="row">

                    <div class="col-lg-8 col-lg-offset-2 col-sm-12">

                        <h1>How it Works..</h1>

                        <h2 style="display: inline-block; word-wrap: break-word; width: 100%;">TextTextTextTextTextTextTextText</h2>

                    </div>

                </div>

                <div class="row" style="color: gray;">

                    <div class="col-sm-3">

                        <h2>Step One</h2>

                        <p>The first step is to register your account. Simple head over to the <a href="signup"> Signup</a> page and fill out the form to create your account.</p>

                    </div>

                    <div class="col-sm-3">

                        <h2>Step Two</h2>

                        <p>TextTextTextTextText</p>  

                    </div>

                    <div class="col-sm-6">

                        <h2>TextTextTextTextText</h2>

                        <p>TextTextTextTextTextText</p>

                        <p>TextTextTextTextTextTextTextTextText.</p>

                        <p><b>TextTextTextTextTextTextText</b></p>

                        <p>TextTextTextTextTextTextTextText</p>

                        <p><b>2. TextTextTextTextTextText</b></p>

                        <p>TextTextTextTextTextTextTextTextText</p>

                    </div>

                </div>

            </div>

        </section>

    </body>

</html>

* - SIM-1809171 - Sep 2, 2016

(Aug 29, 2016 02:35 PM)Usul Wrote: Here's what I came up with.

Code
Here's what I came up with. [code] <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <section class="video-block text-center fullsize"> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-sm-12"> <h1>How it Works..</h1> <h2 style="display: inline-block; word-wrap: break-word; width: 100%;">TextTextTextTextTextTextTextText</h2> </div> </div> <div class="row" style="color: gray;"> <div class="col-sm-3"> <h2>Step One</h2> <p>The first step is to register your account. Simple head over to the <a href="signup"> Signup</a> page and fill out the form to create your account.</p> </div> <div class="col-sm-3"> <h2>Step Two</h2> <p>TextTextTextTextText</p> </div> <div class="col-sm-6"> <h2>TextTextTextTextText</h2> <p>TextTextTextTextTextText</p> <p>TextTextTextTextTextTextTextTextText.</p> <p><b>TextTextTextTextTextTextText</b></p> <p>TextTextTextTextTextTextTextText</p> <p><b>2. TextTextTextTextTextText</b></p> <p>TextTextTextTextTextTextTextTextText</p> </div> </div> </div> </section> </body> </html>

This made no difference. Still overflowing

* - Two-Ton 21 - Sep 2, 2016

Oops, here's what I meant, you can use &shy--; to break text up.
Spoiler (Click to View)

Code 
<!doctype html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

        <section class="video-block text-center fullsize">

        <div class="container fullsize">

            <div class="row">

                <div class="col-sm-8 col-sm-offset-2">

                    <h1>How it Works..</h1>

                    <h2>Hypo&shy;chondriac-schizo&shy;phrenic</h2>

                </div>

            </div>

            <div class="row" style="color: black">

                <div class="col-sm-3">

                    <h2>Step One</h2>

                    <p>The first step is to register your account. Simple head over to the <a href="signup"> Signup</a> page and fill out the form to create your account.</p>

                </div>

                <div class="col-sm-3">

                    <h2>Step Two</h2>

                    <p>Text Text Text Text Text</p>  

                </div>

                <div class="col-sm-6">

                    <h2>pneumono&shy;ultra&shy;microscopic&shy;silico&shy;volcano&shy;coniosis</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend ultricies magna id interdum. Sed dui purus, feugiat ac posuere vitae, viverra nec tortor. Etiam vitae mi nisi. Pellentesque malesuada dolor id mi ultrices, vel sodales justo malesuada. Aenean pharetra pulvinar commodo. Proin dolor tellus, varius eget aliquam in, luctus ut diam. Pellentesque faucibus efficitur nulla sed posuere. Fusce maximus nulla massa, et efficitur nisi sodales quis. Curabitur libero ipsum, mollis at commodo vel, rutrum in augue. Ut sodales, lacus eget scelerisque ultricies, lectus justo congue felis, vitae laoreet orci eros quis sem. Sed nec ligula sem. Suspendisse commodo enim eu justo ullamcorper, varius venenatis eros ullamcorper. Pellentesque laoreet orci massa. Nulla dignissim laoreet massa id scelerisque.</p>

                </div>

            </div>

        </div>

    </section>

    </body>

</html>