Question

如何让文字留在div中？打破线而不是脱离div？我正在使用两个div，一个用于导航栏，一个用于内容...所以在内容中我有这个div我放文本，当文本太大时它会增加div内容并减少导航栏，因为我做离开导航栏的固定大小与文本的大小无关，不要让文本离开div？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您应该使用word-wrap:break-word。但请记住，＆＃34; sssss＆＃34;单词太长，不是单词的有效表示。

Answer 2

首先，您在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>

有关word-break：https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

的详细信息

请注意，这会破坏溢出其容器的所有字词，因此，根据您的最终提案，您可以按照某人的建议使用word-wrap属性。使用：

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

Answer 3

尝试

style="word-wrap: break-word;

Answer 4

你可以使用“word-wrap：break-word;”但这个词太长了，无效。

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

4 个答案: