HTML Div mit Scrollbar

Question

Wie kann ich den Text so anzeigen das er nicht über das DIV hinaus geht sondern eine Scrollbar angezeigt wird und der Text dahinter versteckt ist?

<style>

div.container {
    width: 200px; 
    height: 200px;
    border: 1px solid red;
    padding: 10px;
}
</style>

<div class="container">
Lorem ipsum dolor sit amet consectetuer augue et interdum dui feugiat. Leo eget magna neque Pellentesque non ut diam nibh ligula sem. Molestie facilisi mauris leo sem eleifend id ridiculus Vestibulum et eget. Amet Mauris nulla cursus nunc tellus at condimentum risus elit feugiat. Eleifend pellentesque nibh sem ultrices quis nulla at consequat Nulla pharetra. Adipiscing odio Suspendisse semper mauris montes eget nibh habitant et.

Dolor cursus Lorem semper venenatis tellus In gravida nec ante hac. Adipiscing dictum adipiscing eget nunc faucibus Donec purus tempus odio Vestibulum. Sagittis condimentum Vestibulum aliquet mollis convallis semper Vivamus ut nulla eget. Tincidunt laoreet sed ligula orci et tincidunt in eget feugiat pretium. Vestibulum pulvinar habitasse et justo vel hac adipiscing dapibus enim id. Pretium eget lorem pellentesque Curabitur mattis interdum sed augue dolor nunc. Purus sed et.

Tellus et metus sapien semper ultrices metus pede aliquet porttitor Curabitur. Risus vitae lacus pretium platea sit Nunc aliquet consectetuer tincidunt libero. Mauris quis sit vel condimentum Curabitur parturient nunc massa condimentum cursus. Purus sociis congue ridiculus condimentum ipsum justo condimentum et malesuada auctor. Tellus at vitae facilisi Integer Sed dapibus tellus cursus sociis Nullam. Magnis sapien Duis quis amet massa convallis ac consequat faucibus laoreet. Id.

Pede pellentesque mauris at risus hendrerit ante id elit Sed et. Quisque gravida sapien nibh non nec sem tempor quis vitae dui. Nunc fringilla Nulla leo dui vitae et ut id Nulla nunc. Et In Proin Nunc ac tincidunt nulla mauris amet ut tincidunt. Venenatis Curabitur adipiscing Ut Vestibulum nibh amet dolor adipiscing felis urna. A Nam consectetuer semper elit tellus id fermentum Sed urna.


</div>

Answer 1

Die CSS Eigenschaft "overflow" steuert das Verhalten von Inhalten, die nicht in das Element passen.

• visible: Standardwert. Der Inhalt bricht nicht um und kann über den Elementrahmen hinausgehen.
• hidden: Der Inhalt, der über den Elementrahmen hinausgeht, wird abgeschnitten und ist nicht sichtbar.
• scroll: Eine Scrollbar wird immer angezeigt, unabhängig davon, ob der Inhalt den sichtbaren Bereich des Elements überschreitet oder nicht. Wenn der Inhalt größer ist, kann der Benutzer die Scrollbar verwenden, um den Rest des Inhalts anzuzeigen.
• auto: Eine Scrollbar wird nur angezeigt, wenn der Inhalt den sichtbaren Bereich des Elements überschreitet. Andernfalls wird keine Scrollbar angezeigt.
• inherit: Erbt den Wert von der übergeordneten Komponente.

Du setzt die Eigenschaft in deinem CSS am besten auf "auto".

div.container {
    width: 200px; 
    height: 200px;
    border: 1px solid red;
    padding: 10px;
    overflow: auto;
}