4. [CSS] Probleme mit Zeilenumbruch.

[CSS] Probleme mit Zeilenumbruch.

  • W

    Hallo Zusammen

    Ich suchte in Google und las verschiedene Beiträge zu diesem Thema. Doch leider hilft mir nichts. Ich habe ein CSS-Layout mit zwei Spalten, beide nebeneinader durch faux und float positioniert.

    Allerdings wollte ich erreichen, dass im zweiten Container (ID: rightcolummn) der Text bei Ende der erreichten Weite von 683px automatisch umbricht, auch wenn keine Leerzeichen vorhanden sind. Der Text bricht ja nur bei einem Leerzeichen um. Möchte aber erreichen dass dieder auch ohne Leerzeichen umgerochen wird. Zum beispiel das d:

    InhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhaltInhalt

    sollte am ende umgebrochen werden.

    Ich versuchte es mit overflow:auto; und mit white-space: normal; und white-space: pre; und vieles mehr.. Leider half mir nichts weiter. Der zu lange Text geht einfach drüber hinaus.

    Wie kann ich das umgehen und ändern?
    Es wäre zu mühsam immer selbst nach de Texteingabe zu kontrolloeren wo ein BR gesetzt werden müsste..

    Freundliche Grüsse
    Wolf

    PS: Hier noch der CSS-Code:

    body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #000033;
}
#wrapper {
 margin: 0 auto;
 width: 922px;
}
#faux {
 background: url(images/faux.jpg);
 margin-bottom: 5px;
 overflow: auto;
 width: 100%
}
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background-image:url(images/logo_920_130.jpg);
}
#leftcolumn {
 display: inline;
 color: #333;
 margin: 0px;
 padding: 0px;
 width: 195px;
 float: left;
}
#rightcolumn {
 float: right;
 color: #333;
 margin: 10px;
 padding: 0px;
 width: 683px;
 display: inline;
 position: relative;
}
#footer {
 width: 902px;
 clear: both;
 color: #333;
 background: #ABBEBE;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

    In HTML geht es um diesen Bereich:

    <div id="rightcolumn">
	   	Inhalt (oder eben auch ohne leerezciehn) hier wird der  text  unterbrochen da leerzeichen vorhanden. Nun wird der folgende Text nicht mehr unterbrochen warumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarumwarum
</div>
    0
  • W

    Ich hatte vollkommen vergessen die Lösung zu posten. 🙂
    Denn ich hab eine Lösung gefunden wie der Text nun korrekt umgebrochen wird..

    Die HTML Datei schaute beim Problem mit dem Umbruch noch so aus:

    //...
	<div id="faux">

		 <div id="leftcolumn">

		                    <div id="menu3">
                        <ul>';
 $html_header = $html_header1.$html_header2.$html_header3;
 $html_header_2 ='                  </ul><br /><center><div id="craftysyntax" style="width:142px; align:center;">
<script type="text/javascript" src="http://livesupport.globesolutions.ch/livehelp_js.php?eo=1&amp;serversession=1&amp;pingtimes=15"></script>
</div></center><br />
                </div>

		 </div>

		 <div id="rightcolumn">
Hier der Problemtext, der jetzt gerade noch nicht korrekt umgebrochen wird, oder eben auch gar nicht.
</div>

    Der DIV-ID faux (<div id="faux">) hab ich einfach eine Klasse hinzugefügt. D.h., im CSS_File erstelle ich eine Klasse namens .left und füge dies dann dem Faux-Div hinzu.

    Dazu schreibt man folgendes zusätzlich in die CSS Datei:

    * { padding: 0; margin: 0; }

.left { float: left; margin: 0px; margin-left: 0px; width: 100%; position: relative; }

#right {
float: right;
}

    in der HTML sieht es nun folgendermassen aus:

    //...
	<div id="faux" class="left">

		 <div id="leftcolumn">

		                    <div id="menu3">
                        <ul>';
 $html_header = $html_header1.$html_header2.$html_header3;
 $html_header_2 ='                  </ul><br /><center><div id="craftysyntax" style="width:142px; align:center;">
<script type="text/javascript" src="http://livesupport.globesolutions.ch/livehelp_js.php?eo=1&amp;serversession=1&amp;pingtimes=15"></script>
</div></center><br />
                </div>

		 </div>

		 <div id="rightcolumn">
Durch das class=left im Faux wird der Text nun schön unterbrochen wie es auch sein muss. :) 
</div>

    Freundliche Grüsse
    Wolf

    0
Anmelden zum Antworten