Shrink content to fit div

Question

I have a div into which a description goes. However the div should not exceed a certain width and height.

The content that goes into the div makes the div exceed the limits.

How can I force the content to resize so that it won't make the div exceed the limits?

At the moment my div looks like this.

#Description {
    margin-top: 0px;
    max-height: 150px;
    max-width: 230px;
    background-color: #365478;
    display: inline-block;
    max-width: 500px;
    display:table;                
}

This is the HTML that I am using to call up the description div.

<?php echo "<div id = 'Description'>" . $output[Description] . "</div>" ?>

If it helps you can see the problem on the website i am working on here. luke.dx.am

Answer 1

<table> elements (and those with display: table ) automatically expand to allow all of their contents to be included, regardless of maximum widths specified. It's also strange to want to output a paragraph into a table directly . As such, I recommend changing the content to be something like display: block instead.

In addition to this, you probably want to add ellipsis to your text, so that so that it cuts off and shows three dots if there is more text than can fit in the restricted area. This can be done by applying white-space: nowrap , overflow: hidden and text-overflow: ellipsis , as is done in the following:

#Description {
  display: block;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

It should also be noted that I am unable to test manually on your site, due to it being blocked by my filter for sexual content. I can only begin to wonder what you're hosting there ;)