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

Question

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

Navigation

#1 by (3 votes)

0

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

php css

asked by anonymous 16.09.2017 / 17:07

1 answer

PDOStatement :: rowCount returns -1 Function with template

score 3 · Answer 1

Replace height of div with min-height , thereby height of the div will be a minimum height, and can be expanded by the text, also add the class word-wrap: break-word; to the tag <p> so that the text entered in it breaks line when arriving at the width limit of the element in which it finds, in this case, its div . Note:

$(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><inputtype="text" id="input" placeholder="digite o texto aqui">
    <div class="texto">
      <p id="pTexto"></p>
    </div>
  </body>
</html>