How do I make my div height fit the size of my text?

Asked

Viewed 41 times

0

When I insert my text it goes beyond my div. Please help me out.

php css

1 answer

3

Replace the height of div for min-height, thus, the height of div will be a minimum height, can be expanded by text, add also the class word-wrap: break-word; tag <p> so that the text typed in it breaks line when arriving at the width limit of the element in which it is, in this case, its div. Observe:

$(document).ready(() => {
  $("#input").keyup(() => {
      var valInput = $('#input').val();
     $("#pTexto").text(valInput);
  });
});
.texto{
  width:200px;
  min-height: 20px;
  background-color:#000;
  color:#fff; 
}
p{
  word-wrap: break-word;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <input type="text" id="input" placeholder="digite o texto aqui">
    <div class="texto">
      <p id="pTexto"></p>
    </div>
  </body>
</html>

Browser other questions tagged php css

You are not signed in. Login or sign up in order to post.