Shrink Inhalt passend zu div

Question

Ich habe ein Div, in dem eine Beschreibung geht. Das div sollte jedoch eine bestimmte Breite und Höhe nicht überschreiten.

Der Inhalt, der in das Div einfließt, lässt das Div die Grenzen überschreiten.

Wie kann ich den Inhalt zwingen, die Größe zu ändern, damit das div die Grenzen nicht überschreitet?

Im Moment sieht mein div so aus.

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

Dies ist der HTML-Code, den ich verwende, um die Beschreibung div aufzurufen.

Wenn es hilft, können Sie das Problem auf der Website sehen, ich arbeite hier. luke.dx.am

Answer 1

<table> elements (und solche mit display: table) erweitern, um automatisch alle ihre Inhalte zu erlauben unabhängig von maximalen Breiten angegeben enthalten, werden. Es ist auch seltsam, einen Absatz in eine Tabelle direkt ausgeben zu wollen. Daher empfehle ich, den Inhalt stattdessen auf display: block zu setzen.

Darüber hinaus möchten Sie möglicherweise Ellipsen zu Ihrem Text hinzufügen, so dass es abgeschnitten und zeigt drei Punkte, wenn mehr Text als in den eingeschränkten Bereich passen kann. Dies kann durch Anwendung white-space: nowrap, overflow: hidden und text-overflow: ellipsis erfolgen, wie in der getan folgt:

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

Es sollte auch darauf hingewiesen werden, dass ich nicht in der Lage bin manuell auf Ihrer Website zu testen, weil es durch meine Filter geblockt wird für sexuellen Inhalt. Ich kann mich nur fragen, was Sie dort hosten;)