Ich muss langen Text in einem Container umhüllen

Ich habe Probleme beim Umbrechen von Text in meinem Container. Ich habe bereits gesucht und alle Antworten wurden in word-wrap: break-word; eingegeben, aber es funktioniert nicht für mich. Ich muss etwas tun falsch, aber ich habe Probleme, was zu finden.Ich muss langen Text in einem Container umhüllen

ist die Website, so dass Sie durch den Quellcode suchen kann: http://www.simplistico.net/

Jede Hilfe sehr geschätzt.

Bearbeiten: Auch der Container Hintergrund ist in rot, so dass Sie es deutlich sehen können.

Quelle

2012-04-06 Amazonico

Es ist außerhalb Ihres Containers. Warum würde es passen, wenn es nicht drin ist? Sie sollten eine Breite angeben oder sie innerhalb des Containers verschieben. – j08691

@ j08691 Das ist nicht der Fall (zumindest nicht mehr, vielleicht wurde der Code inzwischen korrigiert). Es gibt einen Tippfehler in der CSS-Datei. Mit ein paar Modifikationen funktioniert alles gut. Siehe meine Antwort unten. –

Ich hatte ein ähnliches Problem - mein Text hatte keine Leerzeichen, also war es nicht in zwei Zeilen aufgeteilt. Ich weiß, das ist nicht dein Problem, aber poste es hier, denn es hat eine Weile gedauert, bis ich es begriffen habe. – flobacca

Warum nicht einfach eine Breite auf Ihrem P-Tag festlegen?

p { 
width:65%; 
}

Edit:

Vielleicht sollte ich mehr klar gewesen. Wenn Sie das p-Tag bereits im Container haben, müssen Sie es nicht unbedingt wie oben beschrieben tun. Du könntest etwas wie.

#container p { 
width:65%; 
}

Auf diese Weise sind nur die p-Tags innerhalb des angegebenen Containers betroffen.

Standardmäßig wird ein P-Tag 100% seines Containers strecken. Beachten Sie auch, dass Wortumbruch und Zeilenumbruch CSS3-Eigenschaften sind und nur bei bestimmten Browsern standardmäßig funktionieren. http://www.w3schools.com/cssref/css3_pr_word-break.asp

Auch Wortbruch wird nur an den Grenzen eines Containers brechen. Und weil Sie ein p-Tag mit einer Standardbreite von 100% innerhalb eines anderen Containers haben, der Ihren "roten Hintergrund" -Behälter überschreitet. Es wird an den Grenzen dieses Containers brechen. Also technisch funktioniert es.

Quelle

2012-04-06 16:01:08

@Amazonico Dies wäre eine schlechte Übung, es sei denn, Sie möchten wirklich, dass jeder Absatz auf jeder Seite 65% der Breite seines Containers hat. '.someSpecialPlace p {}' wäre dann sinnvoller, wenn ein Tag ganz anders formatiert werden soll (es sei denn, die ganze Site ist nur ein paar Seiten lang). –

Vielen Dank Jungs. Kris Hollenbeck und die Antworten von developeddaly haben geholfen, das Problem zu beheben und es ist so positioniert, wie ich es möchte. Danke nochmal Jungs! – Amazonico

Nein ZZ-bb, es ist gut für mich. Es ist nur ein paar Seiten mit einigen allgemeinen Informationen über sie. – Amazonico

Wenn Sie die Position content einnehmen möchten, müssen Sie explizit eine Breite angeben.

Versuchen:

content { width: 600px; }

Quelle

2012-04-06 16:28:14 developdaly

Vielen Dank Jungs. Kris Hollenbeck und die Antworten von developeddaly haben geholfen, das Problem zu beheben und es ist so positioniert, wie ich es möchte. Danke nochmal Jungs! – Amazonico

zuerst Ihre CSS-Datei .content {} sein sollte (jetzt gibt es ein Tippfehler - content {} - so etwas in ihm hat keinen Einfluss, was so überhaupt).

Ich weiß nichts über HTML5-Tag <nav>, also habe ich das <ul>-Tag gemacht, um eine Klasse zu haben: <ul class="nav">. Dann fügte man der CSS-Datei einen neuen Stil hinzu: nav {float:left} und entfernte den p{word-wrap: break-word;} Stil. Das funktioniert fast perfekt. Der rote Hintergrund endet dort, wo der Inhalt endet, also muss er behandelt werden.

UPDATE: ein CSS-Stil .clearfloat{clear:both;} und in HTML-Datei gehen <br class="clearfloat" /> nach dem letzten Absatz in den <content> der roten Hintergrundfarbe zu ermöglichen, die ganzen Weg hinunter hinzuzufügen.

UPDATE2: Graben der position und left Attribute des CSS-Datei des .content und passen Sie die Ränder von <nav> und <content> so werden sie ausgerichtet sind.

Quelle

2012-04-06 16:33:39

Ich muss langen Text in einem Container umhüllen

Antwort

Verwandte Themen