CSS/Tutorials/Boxmodell/übergroßer Inhalt

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Boxmodell
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Einstieg in CSS
Größenangaben


Normalerweise sollte die Größe eines Elements so gewählt sein, dass der anzuzeigende Inhalt sichtbar dargestellt wird. Alle Browser stellen ohne weitere Angaben die Elemente auch entsprechend dar. Wenn der Viewport nicht ausreicht, werden Scrollleisten eingeblendet. In diesem Kapitel soll gezeigt werden, wie Sie den Inhalt eines Elements mit CSS gestalten können, wenn dieser größer als der Anzeigebereich ist.

Erinnern Sie sich noch an unser Symboldbild am Anfang des Kurses?
Was wie ein Unfall aussieht, zeigt eigentlich nur, wie viele Möglichkeiten CSS bietet.

CSS-icon.svg

Es gibt drei Bedingungen, die erfüllt sein müssen, damit dieses Problem auftritt:

  • Der Inhalt kann nicht so verkleinert werden, dass er in den Container passt.
  • Der Container kann sich nicht ausdehnen, um sich dem Inhalt anzupassen.
  • Der Container kann einen Überlauf nicht ordnungsgemäß verarbeiten.

In der Praxis ist die zweite Bedingung - meist verursacht durch das Setzen von festen Größenangaben - diejenige, die am ehesten behoben werden muss, aber wir werden alle drei Bedingungen untersuchen.[1]


overflow[Bearbeiten]

Die Eigenschaft overflow ist die Zusammenfassung der Eigenschaften overflow-x und overflow-y. Sie ermöglicht es, Inhalte größer als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Damit die Inhalte trotzdem erreichbar sind, können Sie bestimmen, ob Scrollbalken erscheinen sollen.

  • IE
  • Firefox
  • Safari
  • Chrome
  • Opera

Details: caniuse.com

Durch Setzen der overflow Eigenschaft auf einen anderen Wert als visible wird ein neuer Blockformatierungskontext erzeugt.

Erlaubt sind dabei folgende Angaben:

  • auto, der Browser entscheidet, ob der Inhalt des Elements mit oder ohne Scrollbalken dargestellt wird. Passt der Inhalt in den Container, wird er angezeigt, ist er größer, werden Scrollbalken angezeigt.
  • scroll, Inhalte sind per Scrollbalken erreichbar
  • visible, (Default-Wert) Inhalte sind sichtbar und ragen bei Bedarf über die Grenzen des Elements hinaus
  • hidden, Nur die Inhalte sind sichtbar, die sich innerhalb des Anzeigebereichs des Elements befinden. Was darüber hinausragt, wird abgeschnitten.
overflow ansehen …
#eins  { overflow: visible; }
#zwei  { overflow: scroll hidden; }
#drei  { overflow: hidden; }

.box {
  color: #c32e04;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 4em;
  font-weight: bold;
  border: medium solid black;
  padding: 3px;
  width: 200px;
}
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

overflow-x[Bearbeiten]

Mit CSS3 wird das Konzept von overflow erweitert. overflow ist jetzt eine Zusammenfassung der Einzeleigenschaften overflow-x und overflow-y.

Beispiel
p { overflow:   hidden visible; }
p { overflow-x: hidden;
    overflow-y: visible; }
Beide Deklarationsblöcke bewirken dasselbe.
Beachten Sie: Wenn Sie für overflow-x einen Wert festlegen, wird automatisch der Wert für overflow-y auf auto anstelle des Standardwerts visible gesetzt. Dies führt zu einer leichten vertikalen Verschiebung der nachfolgenden Elemente.
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

text-overflow[Bearbeiten]

Mit der Eigenschaft text-overflow können Sie auf abgeschnittenen Text hinweisen, z. B. durch Auslassungspunkte.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • clip, Text wird abgeschnitten (Standardwert)
  • ellipsis, "…" zeigen an, dass der Text weitergeht
  • 'string', eine Zeichenkette zeigt an, dass der Text weitergeht


text-overflow ansehen …
#eins  { text-overflow: clip; }
#zwei  { text-overflow: ellipsis; }
#drei  { text-overflow: " bla"; }

.box {
  overflow: hidden;
  /* anders ist gar kein überfließender Text möglich */	
}

Information: Auf- und Zuklappen der Textbox

Um mit einem Klick auf die ellipsis- Punkte den ganzen Text sehen zu können, könnten Sie den overflow-Wert der Box mittels classList.toggle ändern.
Einfacher wäre der Einsatz einens semantisch passenden details-Elements.
Beachten Sie: text-overflow kann nur wirken, wenn die overflow-Eigenschaft des Containers den Wert hidden, scroll oder auto hat und zudem der automatische Zeilenumbruch durch white-space: nowrap; oder eine feste Höhe verboten wird.


Textumbruch[Bearbeiten]

Diese Alternativen sind eigentlich am attraktivsten: Der überlange Text bricht nach unten in eine neue Zeile um.

Textumbruch mit CSS ansehen …
#eins  { 
	word-break: break-all; 
}
#zwei  {  
	-webkit-hyphens: auto; 
	hyphens: auto; 
}

.box {
	color: #c32e04;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3em;
	font-weight: bold;
	border: medium solid black;
	padding: 3px;
	width: 150px;
}

In der linken Variante wird das Wort mit word-break das Wort am Rand des Containers umgebrochen. Allerdings sieht dies „komisch“ aus, da es sich nicht an die Trennungsregeln hält und die Wörter auseinanderreißt.

Besser ist da die hyphens-Eigenschaft, die eine automatische Silbentrennung aktiviert. Damit die Browser Wörter regelgerecht trennen können, idt es wichtig, die passende Sprachauszeichnung mit dem lang-Attribut vorzunehmen.

Alternativen mit SVG[Bearbeiten]

Zur Abrundung sollen hier noch zwei Varianten mit SVG gezeigt werden.

Im ersten Beispiel wird das letzte Wort so skaliert (gestaucht), dass es in den verfügbaren Platz passt.

Stauchung mit lengthAdjust ansehen …
	<p class="box" lang="en">
		<svg viewBox="0 0 150 150">
			<text x="0" y="33%">SVG</text>
			<text x="0" y="66%">is</text>
			<text x="0" y="99%" textLength="100%" lengthAdjust="spacingAndGlyphs">Awesome</text>
		</svg>
	</p>

Jedes Wort findet sich in einem eigenen text-Element. Das letzte text-Element enthält neben den Koordinaten ein lengthAdjust-Attribut, das den Text auf die mit textLength ermittelte in der ViewBox verfügbare Textlänge (von 150 dimensionslosen Einheiten) staucht.


SVG erlaubt auch umfangreiche und komplexe Masken und Beschneidungen:

Maskierung ansehen …
<svg viewBox="0 0 260 150">
	<defs>
		<mask id="Maske" maskUnits="userSpaceOnUse" x="0" y="0" width="160" height="160">
			<rect x="0" y="0" width="160" height="160" fill="white" /> 
		</mask>
		<g id="text">
			<text x="0" y="32%">SVG</text>
			<text x="0" y="64%">is</text>
			<text x="0" y="96%">Awesome</text>
		</g>	
	</defs>
		
	<!-- Hintergrund: Rechteck mit schwarzer Füllung (Standardwert) -->
	<rect x="0" y="0" width="160" height="160" />
	<!-- Text wird doppelt benötigt:
	 		1. schwarzer Text ohne Maske
        2. weißer Text mit Maske -->
	<use href="#text" fill="black" />
	<use href="#text" fill="white" mask="url(#Maske)" />
</svg>

Der Text wird im Definitionsabschnitt angelegt. Dort findet sich auch eine Maske.

Im Grafikbereich wird zuerst ein Rechteck gezeichnet. Da die Füllangabe fehlt, wird es schwarz gezeichnet.

Zwei use-Elemente refenzieren den Text, der in der Grafik als Text vorhanden ist. Er kann selektiert, kopiert und von Suchmaschinen und Screenreadern gelesen werden.

Auch das erste use-Element erhält eine schwarze Füllung.

Das zweite use-Element erhält eine weiße Füllung, wird aber nur im Bereich des mask-Elements ausgeschnitten.

Fazit[Bearbeiten]

Wenn Sie Stylesheets richtig verwenden, um das Aussehen einer Seite vorzuschlagen und nicht, um das Aussehen einer Seite zu kontrollieren, und wenn Sie sich nicht auf Ihr Stylesheet verlassen, um Informationen zu übermitteln, dann werden Ihre Seiten in jedem Browser, ob in der Vergangenheit oder in der Zukunft, gut "funktionieren".

John Allsopp, April 07, 2000: A Dao of Web Design[2]

Wie im vorhergehenden Kapitel dienen diese Beispiele eher als proof of concept und nur zur Demonstration der CSS-Eigenschaften als zum wirklichen Einsatz in repsonsiven Webseiten.

Bis auf die Silbentrennung mit hyphens sollten Sie stets überlegen, ob Sie diese Einschränkungen der Responsivität überhaupt brauchen!


Siehe auch[Bearbeiten]

Referenz:

Weblinks[Bearbeiten]

Quellen

  1. Dieser Artikel beruht auf einer Idee und Überarbeitung von
    css-tricks: CSS is Awesome von Brandon Smith, Jul 3, 2017
  2. John Allsopp, April 07, 2000:A Dao of Web Design