text exiting out of div and changing the size of another div

Question

How do I make the text stay inside the div? and break the lines instead of getting off the div? I am working with two divs one for the navbar and one for the content ... so inside the content I have this div that I put the text, when the text is too large it increases the div content and decreases the navbar, as I do to leave the navbar with the fixed size independent of the size of the text and not let the text get out of the div?

DivDescricao {
  min-height: 150px;
  border: 1px solid #C8C7C7;
  margin: 10px;
  padding: 10px;
  border-left: 10px solid #C8C7C7;
  background: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div id="fases" class="col-md-12" style="height:200px">
  <div class="DivDescricao" style="background:red;">
    <h4> Fase 1 </h4>

    <b> Descrição:</b> sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasda
    <br> ihasdhalshd ahsdkjahskdh kashdk ashk hask dhaskjd aksdhk ahskd jhk

    <br>
    <b> Situação: </b> Em andamento

    <br>
    <a> Detalhar </a>
  </div>
</div>

Possible duplicate of [How to force a line break in a loooooong word in a DIV?](https://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-loooooong-word-in-a-div) — roberrrt-s, Feb 01 '18 at 11:11

score 2 · Answer 1 · answered Feb 01 '18 at 11:11

2

You should use word-wrap:break-word. But keep in mind that that "sssss" word is too long and not a valid representation of a word.

answered Feb 01 '18 at 11:11

zmuci

518
1
5
21

Ferran Buireu · Accepted Answer · 2018-02-01T11:35:56.283

First of all, you are missing a dot on your CSS selector, should be: .DivDescricao

For your proposal, you can use word-break property. That way:

.DivDescricao {
  min-height: 150px;
  border: 1px solid #C8C7C7;
  margin: 10px;
  padding: 10px;
  border-left: 10px solid #C8C7C7;
  background: white;
  word-break:break-all;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div id="fases" class="col-md-12" style="height:200px">
  <div class="DivDescricao" style="background:red;">
    <h4> Fase 1 </h4>

    <b> Descrição:</b> sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasda
    <br> ihasdhalshd ahsdkjahskdh kashdk ashk hask dhaskjd aksdhk ahskd jhk

    <br>
    <b> Situação: </b> Em andamento

    <br>
    <a> Detalhar </a>
  </div>
</div>

For more information about word-break: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Keep in mind that this will break all words that overflows their container, so moreover, depending on you final proposal, you can use word-wrap property, as someone suggested. Using:

.DivDescricao {
//other properties
word-wrap: break-word;
}

score 1 · Answer 3 · edited Feb 01 '18 at 11:11

1

Try

style="word-wrap: break-word;

edited Feb 01 '18 at 11:11

roberrrt-s

7,914
2
46
57

answered Feb 01 '18 at 11:10

Lalit Narde

87
7

3

you should add more details – Bilal Ahmed Feb 01 '18 at 11:12

score 1 · Answer 4 · answered Feb 01 '18 at 11:32

1

You can use "word-wrap: break-word;" however the word is too long and its not valid.

answered Feb 01 '18 at 11:32

Jaszai

11
1

text exiting out of div and changing the size of another div

4 Answers4