[CSS] text in tablecell netjes afbreken

[EmilneM]

In een tablecell met een vaste grootte wil ik dat text als deze te lang is wordt afgebroken. Liefst netjes met '...' maar ik denk dat dit lastig is omdat niet elk karakter even breed is.

Is er een manier om dit af te handelen in mijn CSS-stylesheet? Ik heb al iets geprobeerd met "overflow: hidden" in de style-property van de tablecell. Echter, zonder resultaat.

[Verwijderd]

in IE kan het met text-overflow: ellipsis
http://www.blakems.com/archives/000077.html

imho wel een bijzonder toffe toevoeging

[ Voor 22% gewijzigd door Verwijderd op 16-09-2004 11:32 ]

[RM-rf]

Verwijderd schreef op 16 september 2004 @ 11:32:
in IE kan het met text-overflow: ellipsis
http://www.blakems.com/archives/000077.html

imho wel een bijzonder toffe toevoeging

cool, dat wilde ik al langer: [rml]RM-rf in "[ Usability] Optimal line length vs. liqu..."[/rml]

nu nog een elipsis-content erbij, dat je zelf kunt definieren wat er met zo'n overflow gebeurt ... is dat overigens ook op CSS-W3C mailinglists besproken? overflow is onderdeel van de box-module binnen CSS3, maar op die manier zou het bijna een eigen module worden.

edit:
ja, idd, maar als onderdeel van CSS3-text-module ( http://www.w3.org/TR/2001...0517/#text-overflow-props het is dus gewoon zelfs een standaard, iets wat MS nu zelfs vergeet te vermelden )
http://www.w3.org/TR/2001...7/#text-overflow-ellipsis
en W3C gaat natuurlijk wel verder dan MS

[ Voor 49% gewijzigd door RM-rf op 16-09-2004 11:43 ]

[Verwijderd]

toen wist ik het ook nog niet

[Verwijderd]

Wat ik net zei wat niet geheel correct
http://www.w3.org/TR/2001...0517/#text-overflow-props
Staat dus wel in de working draft van css3

[ Voor 82% gewijzigd door Verwijderd op 16-09-2004 11:43 ]

[André]

Verwijderd schreef op 16 september 2004 @ 11:40:
Het is inderdaad een toevoeging van Microsoft aan css die wel handig is. Neemt niet weg dat het een IE-only oplossing is en daardoor (vind ik) niet echt bruikbaar. De tekst blijft uiteraard in view source gewoon te zien en met select all ook gewoon te kopieren.

Het is ook geen bescherming tegen het kopieren van tekst, het is gewoon een manier van afbreken op het moment dat stukken tekst te lang worden.

[Verwijderd]

FYI: Die working draft is gebaseerd op MS's implementatie, niet andersom.

[Genoil]

ik heb geen mooie manier van afbreken met ..., maar wel een methode om te zorgen dat lange woorden de layout van een tabel niet verprutsen:

klik

de lijn in vakje 10 is een heel lange string. door er met je muis overheen te rollen kun je alsnog de volledige inhoud lezen.

(het einde van de string slaat niet op u. het sloeg op 1 of ander figuur die z'n tabel niet had beveiligd tegen vervelende user-input )

[EmilneM]

Heb in mijn style-sheet één en ander opgenomen:

Cascading Stylesheet:

.DG
{
    table-layout: fixed;
    background: white;
    border: 1px solid #CCCCCC;
    font-size: 12px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 1px !important;
    padding-right: 2px !important;
}

.DG td
{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Echter, als er een spatie in de regel staat wordt de regel toch afgebroken en op de volgende regel geplaatst . De 'white-space: nowrap;' property lijkt niet helemaal te werken. Hoe krijg ik het voor elkaar dat ie ondanks spaties op één regel blijft?

[ Voor 6% gewijzigd door EmilneM op 16-09-2004 12:40 ]

[Genoil]

EmilneM schreef op 16 september 2004 @ 12:39:
..
Hoe krijg ik het voor elkaar dat ie ondanks spaties op één regel blijft?

de span een height geven

[Verwijderd]

de span een height geven

Span is een inline element en hierop hebben height en width geen invloed. Je voorbeeldje werkt dus ook niet in Firefox en werkt ook niet in IE in standard compliance mode. Alleen in quirksmode.

[ Voor 37% gewijzigd door Verwijderd op 16-09-2004 13:19 ]

[Genoil]

Verwijderd schreef op 16 september 2004 @ 13:16:
[...]


Span is een inline element en hierop hebben height en width geen invloed. Je voorbeeldje werkt dus ook niet in Firefox en werkt ook niet in IE in standard compliance mode. Alleen in quirksmode.

van de span een div maken en naar standardsmode gaan

[EmilneM]

span en div maken heb ik niet direct in de hand omdat het hier gaat om een ASP.NET webcontrol(datagrid) die een htmltable genereert met:

HTML:

<td title="blablabla"></td>

in plaats van:

HTML:

<td><span title="blablabla"></span></td>

Is hier nog wat aan te doen? En waarom onderstaand niet :

Cascading Stylesheet:

TD {
  white-space: nowrap;
  overflow: hidden;
}

[ Voor 26% gewijzigd door EmilneM op 21-09-2004 10:12 ]

[EmilneM]

Ben er nu achter dat die 'white-space: nowrap' alleen werkt als ik de tablecell geen 'width' meegeef . Dit moet toch te omzeilen zijn?

[EmilneM]

De output van de datagrid is als volgt:

HTML:

<td title="Dit is een te lange tekst" style="width:230px;">
     Dit is een te lange tekst
</td>

Als CSS heb ik het volgende:

Cascading Stylesheet:

.DG td
{
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    height: 22px;
    border: 1px solid #E1E1E1;
}

Toch breekt de regel dus af en gaat deze verder op de volgende regel......hoe ervoor te zorgen dat het bij één regel blijft?