Tag p rendering Line Break (no use of br /)

Question

Tag p rendering Line Break (no use of br /)

Navigation

#1 by (8 votes)

1

I'm making an interface in Bootstrap containing in your content a

below the respective code. Browser Tested: Chrome and Firefox (Both Upgraded) 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

html twitter-bootstrap bootstrap-3

asked by anonymous 30.12.2014 / 18:03

1 answer

2 different tables from each other Reorder HTML structure via jQuery

score 8 · Accepted Answer

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

To work around this behavior, you must specify word-wrap: break-word in your CSS, to "tell" the browser that it can break words in the middle if necessary.

The default 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 word-wrap in the documentation for MDN in .