Toon posts:

Afbreken van tekst in td

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik zit met een probleem;
Ik wil graag dat de tekst in een table cel wordt afgebroken wanneer het niet in de cel past. Dus ook wanneer het een lange doorlopende tekst zonder spaties e.d. is.
Op dit moment loopt in Firefox (image) de tekst over de rand, en in IE7 (image) wordt de tekst verborgen.
Mijn code:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
......
TD{
    padding:5px;
}

.content_table {
    font-size: 13px;
    border: #CCCCCC solid 1px;
    overflow:scroll;
    table-layout:fixed;
}
...


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="0" class="content_table" width="750">
<tr class="content_row_even">
<td class="table_column" width="165">naam</td><td>piet</td>
<td>sjaak</td>
<td>wim</td></tr>
<tr class="content_row_even">
<td class="table_column" width="165">Vereisten</td>
<td>Er zijn geen bfj bfb hfd
dfh hfj fhdj
 dhfjdhfjhfjdf

dsf jfdfh dfs jffdjfdfjdhfjhfjhkfhjhdjfhsdjfhsdhfjshdfjsdhfdhfshdfhefuieh
 fdjhfsk df</td><td>Er zijn geen bfj bfb hfd
dfh hfj fhdj
 dhfjdhfjhfjdf

dsf jfdfh dfs jffdjfdfjdhfjhfjhkfhjhdjfhsdjfhsdhfjshdfjsdhfdhfshdfhefuieh
 fdjhfsk df</td><td>Er zijn geen bfj bfb hfd
dfh hfj fhdj
 dhfjdhfjhfjdf

dsf jfdfh dfs jffdjfdfjdhfjhfjhkfhjhdjfhsdjfhsdhfjshdfjsdhfdhfshdfhefuieh
 fdjhfsk df</td></tr>...
</table>


De td heeft al een width, maar omdat de tekst een lange onafgebroken zin is, wordt hij op een regel gehouden.
Ik heb al van alles geprobeerd (bijv. overflow:auto, enz.), maar kom er maar niet uit.

Verwijderd

Echt afbreken kan niet met css/html als er geen spaties in zitten.
Ook een keertje geprobeerd hier wat voor te maken met javascript: om de zoveel tekens splitten, maar dan zit je er weer mee dat heel veel i's minder breed is dan heel veel m's.

Verwijderd

daarna kan je dan nog eventueel gebruik maken van courier achtige letterttypes

Verwijderd

Topicstarter
Bedankt voor de tips.
Ik heb nu de volgende oplossing bedacht:

De tekst komt in een div'je met een maximum breedte:

Cascading Stylesheet:
1
<div style="max-width:xxxxpx; overflow:auto;">

(De waarde voor max-width heb ik maar even weggelaten)

Dit werkt op zich prima.
Het ziet er niet zo mooi uit, zo een scrollbalk maar het is eenvoudiger te realiseren dan een oplossing proberen te bedenken in JavaScript.
Toch bedankt voor de tips! d:)b

  • WeeJeWel
  • Registratie: April 2007
  • Laatst online: 25-11 11:26
Als je de text zelf invoert kun je toch zelf enters zetten?
En via PHP (wat je waarschijnlijk gebruikt om text erin te zetten) kun je het wel afbreken :)

Homey — Critics are those without skills to create.


Verwijderd

Topicstarter
WeeJeWel schreef op vrijdag 20 april 2007 @ 17:48:
Als je de text zelf invoert kun je toch zelf enters zetten?
Klopt, maar dan vind ik dit een toch iets nettere oplossing. Het staat van te voren niet vast hoeveel cellen de table zal bevallen. Daarnaast kan de bezoeker uiteraard de grootte van het scherm aanpassen (waardoor de table kleiner kan worden). Nu laat ik het client-side "oplossen". Ideaal zou het natuurlijk zijn wanneer er überhaubt geen onafgebroken zinnen instaan, maar ja...
Dit werkt ook en ik ben er blij mee :)

  • frickY
  • Registratie: Juli 2001
  • Laatst online: 08:59
max-width werkt niet in IE6, de meest gebruikte browser.
Overflow:hidden in je TDtje werkt ook prima, maar dan moet je je TD wel een width (in je CSS, niet als attribuut) geven (danwel 100%, danwel vast in pixels).

Verwijderd

Topicstarter
frickY schreef op vrijdag 20 april 2007 @ 18:45:
max-width werkt niet in IE6, de meest gebruikte browser.
Overflow:hidden in je TDtje werkt ook prima, maar dan moet je je TD wel een width (in je CSS, niet als attribuut) geven (danwel 100%, danwel vast in pixels).
Bedankt voor de tip! d:)b
Pagina: 1