[HTML/CSS] Float div met automatische terugloop van tekst

[doak]

Ik zit een terugkerend probleem. Ik wil namelijk dat de div waar de tekst zo extreem buiten valt gewoon de tekst laat terug lopen. Dus gewoon keurig afbreekt en niet voorbij de gestippelde lijn gaat.

HTML code
<div id=loboeken>
<div id=logs>
<span>Geplaats op: sdfsdfsfasdfs </span>
<p>sdfaasdffsdfd</p>
</div>
</div>

CSS
div#logboeken{
float: left;
padding: 8px;
margin-left: 10px;
}

div#logs{
border: medium dotted #FF0033;
margin-bottom: 12px;
padding: 5px;
width: 650px;
max-width: 650px;
}

Ik heb al overflow geprobeerd maar dan breekt ie de tekst ook niet af maar is het gewoon niet meer zichtbaar. Deze div rekt gewoon mee als het een lange string bevat als aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa dit wil ik dus laten verspringen naar een volgende regel etc. Iemand een idee?

[MueR]

Als het een aaneengesloten string is zal dit nooit gebeuren. Op whitespace wordt wel gewrapped.

[spaceninja]

Dit is niet mogelijk.

Er zijn twee manieren waarmee je het kan "oplossen". Maar ze hebben allebei nadelen.
- een overflow:hidden op de div te zetten
- characters in woord tellen en na zoveel characters een spatie of iets anders er tussen zetten

[Y0ur1]

Je kan word-wrap:break-word; gebruiken, maar die is niet w3 compliant en IE only, voor de rest ben ik ook benieuwd naar een workaround

spaceninja schreef op donderdag 21 februari 2008 @ 00:24:
Dit is niet mogelijk.

Er zijn twee manieren waarmee je het kan "oplossen". Maar ze hebben allebei nadelen.
- een overflow:hidden op de div te zetten
- characters in woord tellen en na zoveel characters een spatie of iets anders er tussen zetten

@de 2e oplossing: dan moet je er ook rekening mee houden dat iedere letter een verschillende breedte heeft, behalve lettertypes als courier new. Ook verschilt het weer met lettertype natuurlijk.

[ Voor 67% gewijzigd door Y0ur1 op 21-02-2008 00:30 ]

[f.v.b]

Met een overflow-x: auto krijg je een horizontale scrollbar. Op die manier blijft je layout intact en worden er ook geen teksten afgekapt.

Verder is het natuurlijk gewoon baldadigheid als iemand te lange teksten gaat plaatsen. Wat mij betreft is het afkappen met een overflow: hidden dan de juiste manier om dat af te straffen.

[doak]

Bedankt voor de reacties. Met een overflow-x ziet het er in internet explorer nog wel redelijk uit maar in firefox zie je dan ook de horizontale scrollbar. Denk dan dat de overflow:hidden de mooiste oplossing is. Heb eigenlijk geen zin om iedere string te valideren op lengte. Bedankt

[hing]

Je zou &shy; kunnen gebruiken, werkt in de meeste browsers behalve in FireFox. Als het goed is zal dit in FF3 wel ondersteund worden.