2

Estou fazendo uma interface em Bootstrap contendo em seu conteudo uma tag

envolvendo um texto e logo notei que cada quebra de linha dado com enter no Notepad++ (IDE utilizada) o texto renderizado no borwser saia da mesma forma e quando diminuia de tamanho a janela do browser o texto continuava estatico não se adequando a tela abaixo o codigo respectivo. Browser testados: Chrome e Firefox (Ambos atualizados) Código:

<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 -->

O resultado no Browser

inserir a descrição da imagem aqui

3
  • Só pra entendermos melhor onde está o problema, qual é o resultado que você esperava que fosse o correto?
    – Largato
    Commented 30/12/2014 às 17:06
  • Olhe o texto avançando por baixo das imagens roxas, este texto deveria esta contido na area colorida por laranjado e quando o browser for redimensionado ele fosse se adapatando
    – Ricardo
    Commented 30/12/2014 às 17:08
  • Ententi, irei aplicar e ja respondo
    – Ricardo
    Commented 30/12/2014 às 17:15

1 Resposta 1

10

A saída está correta do seguinte ponto de vista: o browser está pondo a quebra apenas onde há espaço entre as palavras.

Para contornar este comportamento, você precisa especificar word-wrap: break-word no seu CSS, para "dizer" ao browser que ele pode quebrar palavras no meio, se necessário.

O padrão é word-wrap: normal que produz o comportamento que você notou.


Veja os exemplos abaixo e o CSS usado, para comparar os resultados:

.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>


Saiba mais sobre o word-wrap na documentação da MDN en.

2
  • Funcionou adequadamente
    – Ricardo
    Commented 30/12/2014 às 17:19
  • Em condições reais é difícil acontecer isto, mas é sempre bom você se prevenir nestes casos. Uma alternativa é permitir barras de scroll ou overflow:hidden, mas este último pode esconder coisas importantes (e as barras são no mínimo feias).
    – Largato
    Commented 30/12/2014 às 17:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .