CODEWITHSUNDEEP
javascriptjqueryhtmlcsstext
Kyle
Kyle

Reputation: 1578

How can I keep a text of a div inside it and if bigger, then the div expands down?

I'd like to know if there's a way to keep a text inside a div if the text exceeds the width the ´div´'s height is stretched until all the text is fitted.

UPDATE:

Thank y'all for helping +1, so should I use ´Inherit´ or ´min-height´?

A plain div:

plain

Then I added a word-wrap: break-word;, and I've got this:

barely solved

The Ideal:

stretched up

The div's height should be increased in order to fit the whole text

Thanks in advance.

 div {
   width: 50px;
   height: 50px;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }
<!DOCTYPE html>
<html>

<head>
  <title>DIV</title>
</head>

<body>

  <div>asjdkljaddddsadsssssssdfsdfsdfsf</div>

</body>

</html>

Upvotes: 1

Views: 359

Answers (8)

halfzebra
halfzebra

Reputation: 6797

I've been fighting this issue for a long time. Here is one of pure-CSS ways to get that to work.

My example allows you to have a responsive(optionally) block of text, with a customize amount of displayed lines.

// Usually you want to have that everywhere.
* {
  word-wrap: break-word;
}
div {
  /* height / desired number of lines, must be higher than font-size */
  line-height: 16.66px;
  font-size: 14px;

  width: 50px;
  height: 50px;
  border: 1px solid red;
  overflow: hidden;
}
<div class="text">Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the 
industry's standard dummy text ever since the 1500s</div>

Upvotes: 1

Magicprog.fr
Magicprog.fr

Reputation: 4100

Change height to min-height in your CSS:

The min-height property is used to set the minimum height of an element.

This prevents the value of the height property from becoming smaller than min-height.

 div {
   width: 50px;
   min-height: 50px;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }
<!DOCTYPE html>
<html>

<head>
  <title>DIV</title>
</head>

<body>

  <div>asjdkljaddddsadsssssssdfsdfsdfsf</div>

</body>

</html>

Upvotes: 3

Varedis
Varedis

Reputation: 758

If you want to set the div's height initially, then use:

div {
    width: 50px;
    min-height: 50px;
    border: 1px solid red;
    display: inline-block;
    word-wrap: break-word;
}

This will ensure it is at least 50px high, but will still expand when you put more content in it.

Upvotes: 1

herriekrekel
herriekrekel

Reputation: 571

Remove the fixed height

 div {
   width: 50px;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }
<!DOCTYPE html>
<html>

<head>
  <title>DIV</title>
</head>

<body>

  <div>asjdkljaddddsadsssssssdfsdfsdfsfqwqweqewqqweqweeqewqweeqw</div>

</body>

</html>

Upvotes: 1

Vaibhav Sah
Vaibhav Sah

Reputation: 142

 div {
   width: 50px;
   height: 100%;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }
<!DOCTYPE html>
<html>

<head>
  <title>DIV</title>
</head>

<body>

  <div>asjdkljaddddsadsssssssdfsdfsdfsf</div>

</body>

</html>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

If you change height: 50px to min-height: 50px the div's height will grow to fit it's content. Similarly, you can set a limit on the allowed height using max-height.

div {
  width: 50px;
  min-height: 50px;
  border: 1px solid red;
  display: inline-block;
  word-wrap: break-word;
}
  <div>asjdkljaddddsadsssssssdfsdfsdfsf</div>

Upvotes: 1

Anandh Sp
Anandh Sp

Reputation: 787

Try the css lines. You can check here https://jsfiddle.net/ogd5cruf/

div {
   width: 50px;
   height: auto;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

Upvotes: 1

nalinc
nalinc

Reputation: 7425

Simply use width:inherit for your <div>

This way, your <div> will inherit its height from the content it is enclosing

Here's the css class

 div {
   width: 50px;
   height: inherit;
   border: 1px solid red;
   display: inline-block;
   word-wrap: break-word;
 }

and here's the demo

Upvotes: 1

Related Questions