html - 文本退出 div 并更改另一个 div 的大小

Question

如何让文本留在 div 中？并打破线条而不是离开 div？我正在使用两个 div，一个用于导航栏，一个用于内容...所以在内容中我有这个放置文本的 div，当文本太大时，它会增加 div 内容并减少导航栏，因为我将导航栏保留为独立于文本大小的固定大小并且不让文本超出 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>

Answer 1

首先，您的 CSS 选择器上缺少一个点，应该是:.DivDescricao

对于您的提案，您可以使用word-break 属性。这样:

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

有关分词的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

请记住，这会破坏溢出其容器的所有单词，因此此外，根据您的最终建议，您可以使用word-wrap 属性，作为某人建议。使用:

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