Tag <p> rendering Line Break (no <br />)

Question

I’m making a Bootstrap interface containing in its contents a tag

involving a text and soon noticed that each line break given with enter in the Notepad++ (IDE used) the text rendered in the borwser came out in the same way and when decreasing in size the browser window the text remained statico not fitting the screen below the respective code. Browser tested: Chrome and Firefox (both updated) Code:

<div class="wrapper" role="main"><!-- START Content -->
        <div class="container"><!--- START Site Content --->
            <div class="row">
                <div id="conteudo" class="col-md-8" style="border:2px solid red"><!-- START News -->
                    <div class="row">
                        <div class="col-md-12" style="border:2px solid blue">
                            <div class="row" style="border:2px solid green">
                                <img src="../../app.images/7.jpg" style="max-width:150px;max-height:150px;"/>
                                <div class="news_conteudo col-md-9 pull-right" style="border:2px solid yellow">
                                    <button class="btn btn-xs btn-info" href="#" type="button">Publisher</button><br /><br />
                                    <span class="title">Titulo</span><br />
                                    <p class="texto" style="border:2px solid orange">Resumosdaffsdfsdafdsfafasdfasfdsdafasdfsdddddsdddddddddddddddddddddddddddddddddddddddddd
                                    dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
                                    <span><span class="glyphicon glyphicon-eye-open pull-left" style="font-size:19px;"></span>
                                    <span class="views pull-left">13.023 Views</span></span>
                                    <span class="pull-right publish_date">Published in 12/December/2014</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- END News -->
                <div id="left-sidebar" class="col-md-4 pull-right"><!-- START Left Sidebar -->
                    <div class="row">
                        <img class="pull-right" src="../../app.images/4.jpg"/>
                        <img class="pull-right" src="../../app.images/4.jpg"/>
                    </div>
                </div><!-- END Left Sidebar -->
            </div>
        </div><!--- END Site Content --->
    </div><!-- END Content -->

The result in the Browser

Answer 1

The output is correct from the following point of view: browser is putting the break only where there is space between words.

To circumvent this behavior, you need to specify word-wrap: break-word in your CSS, to "tell" the browser that he can break words in the middle if necessary.

The standard is word-wrap: normal that produces the behavior you noticed.

See the examples below and the CSS used to compare the results:

.texto1 {word-wrap:normal}
.texto2 {word-wrap:break-word}
p {width:60%;max-width:400px}

<p class="texto1" style="border:2px solid orange">Resumosdaffsdfsdafdsfafasdfasfdsdafasdfsdddddsdddddddddddddddddddddddddddddddddddddddddd
  dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
<p class="texto2" style="border:2px solid orange">Resumosdaffsdfsdafdsfafasdfasfdsdafasdfsdddddsdddddddddddddddddddddddddddddddddddddddddd
  dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>

Learn more about the word-wrap in the documentation of MDN ^en.