[CSS] Tekst binnen div afbreken op breedte div - Softwareontwikkeling

maandag 1 mei 2006 22:34

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bij het invoegen van tekst op mijn website die bijna klaar is kom ik ineens tot de ontdekking dat tekst "de div uit loopt" in Firefox en de "div uitrekt" in IE.

Ik maak gebruik van de volgende eigenschappen voor een bepaalde div:

Cascading Stylesheet:

#maincol{  
 float:left;  
 position:relative; 
 width:472px;
 margin:0px; 
 padding:1px 4px 4px 4px;
 }

Ik had altijd begrepen dat met het opgeven van een width in pixels een vaste breedte onstaat, maar nu blijkt dat de breedte van de div wordt beinvloed door de inhoud.

Nergens kan ik hetzelfde probleem vinden. Heb gezocht op "fixed width" en "div break line" maar kom er niet uit. Het is toch niet nodig overal <br> toe te passen om de tekst te laten passen? Kan iemand me uitleggen wat hier gebeurd?

[ Voor 6% gewijzigd door Verwijderd op 01-05-2006 22:49 . Reden: css in code ]

maandag 1 mei 2006 22:45

Acties:

0 Henk 'm!

JHS

Splitting the thaum.

overflow: hidden;

?

Het is prettig als je je css code tussen [code=css][/code] tags plaatst

.

[ Voor 71% gewijzigd door JHS op 01-05-2006 22:46 ]

DM!

maandag 1 mei 2006 22:51

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Overflow: hidden zorgt er idd wel voor dat de tekst niet meer doorloopt, maar de "overtollige" tekst gaat dan ook niet door op de nieuwe regel, terwijl ik dat wel graag wil...

Moet dit ook apart worden aangegeven?

maandag 1 mei 2006 22:53

Acties:

0 Henk 'm!

Blaise

Het kan eventueel met deze CSS, maar dat is niet W3C valid en werkt alleen in Internet Explorer.

Cascading Stylesheet:

1
2
3

#maincol{ 
   word-wrap:break-word
}

maandag 1 mei 2006 22:53

Acties:

0 Henk 'm!

Victor

Normaal gesproken zou de tekst gewoon af moeten breken, mits je geen whitespace: nowrap of een vaste hoogte hebt opgegeven... Gebruik je soms

HTML:

&nbsp;

als spatie?

maandag 1 mei 2006 23:08

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Heb 2 nieuwe files aangemaakt met een minimum aan code, deze code laat nog steeds niet de tekst afbreken:

HTML:

<html>
<head>
<link rel="stylesheet" href="style/test.css" type="text/css" />
</head>
<body>
<div id="maincol"> blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabl</div>
</body>
</html>

Cascading Stylesheet:

#maincol{
 background-color: blue;   
 width:400px;
 }

maandag 1 mei 2006 23:14

Acties:

0 Henk 'm!

Victor

Verwijderd schreef op maandag 01 mei 2006 @ 23:08:
Heb 2 nieuwe files aangemaakt met een minimum aan code, deze code laat nog steeds niet de tekst afbreken:

HTML:

<html>
<head>
<link rel="stylesheet" href="style/test.css" type="text/css" />
</head>
<body>
<div id="maincol"> blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabl</div>
</body>
</html>

Cascading Stylesheet:

#maincol{
 background-color: blue;   
 width:400px;
 }

Niet zo gek, je browser weet niet waar ie moet afbreken. Zet ergens een spatie tussen en de tekst zal op dat punt afbreken.

maandag 1 mei 2006 23:23

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Haha niet te geloven zeg, volgende keer zal ik braaf een normale tekst plaatsen als test op mijn site, beetje lui "blabla" neerzetten wordt direct bestraft!

Thanks!

dinsdag 2 mei 2006 00:05

Acties: