| Autor | Zpráva | ||
|---|---|---|---|
| demonek@seznam.cz Profil |
Ahoj,
chtel jsem pouzit funcionalitu overflow:ellipsis a mel jsem predstavu, ze mi hodi tecky na konec bunky u pretekajiciho textu. Tedy ze mi toho do bunky vypise nejvice textu co se vejde a az na konec hodi tecky. Bohuzel mi to zobrazi jen prvni radek. Mozna to zpusobuje parametr white-space:nowrap; ale bez nej to nufunguje vubec. Nevite nekdo jak to udelat, aby mi to text ktery se do bunky nevejde oznacil teckami az na konci bunky a ne na konci prvniho radku? Predem diky <div style = "width:14%; height:14%; background-color:lightblue;overflow:hidden;white-space:nowrap;
text-overflow:ellipsis;">
askjchbasljchsljhclajskclcnslhnlshndalkhdnlkhnlks xxxxxxxxxxxxxxxxxxxxxxxxxxyyyyyyyyyyyyyyy123456
</div >P.S.:Zkusil jsem jeste vymenit parametr white-space:nowrap za word-wrap: break-word a to v postate funguje, jen to na konec nehodi ty tecky, to by se mi hodilo. |
||
| Str4wberry Profil |
#2 · Zasláno: 13. 9. 2014, 14:42:09
Ano,
white-space: nowrap způsobí, že se text nebude zalamovat, nemůže tedy vytvořit více řádků.
Myslím, že to, co chcete udělat, čistě v CSS pro všechny prohlížeče nepůjde. V Opeře 12 funguje: text-overflow: -o-ellipsis-lastline V ostatních prohlížečích bude asi ideální JS řešení. Jde to sice i nahackovat v CSS, ale moc elegantní to není. |
||
|
Časová prodleva: 5 dní
|
|||
| demonek@seznam.cz Profil |
#3 · Zasláno: 18. 9. 2014, 11:11:52
Str4wberry:
Diky za odpoved. Problem je asi v tom, ze se mezi sebou triskaji parametry pro tabulku viz nize: verflow:ellipsis jiz funguje, ale bunka tabulky se mi roztahuje dolu a nehledi na parametr overflow:hidden; To mi hlava nebere. < <!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
<!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
<link href='/favicon.png' rel='shortcut icon' type='image/png'>
<style type="text/css">
html {margin:0;padding:0;height:100%;/*overflow:hidden;*/}
body {margin:0;padding:0;height:100%;/*overflow:hidden;*/}
table {border:solid black 2px; border-collapse: collapse; text-align:center;width:100%;height:100%;table-layout: fixed;}
td,th {border:solid black 2px;width:14%;height:14%;overflow:hidden;text-overflow:ellipsis;}
</style>
</head>
<body>
<table>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>
11111111111111111111111111111111111111111111
22222222222222222222222222222222222222222222
33333333333333333333333333333333333333333333
44444444444444444444444444444444444444444444
55555555555555555555555555555555555555555555
66666666666666666666666666666666666666666666
77777777777777777777777777777777777777777777
88888888888888888888888888888888888888888888
99999999999999999999999999999999999999999999
12122121212121212121212121212122121212121212
</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
</table>
</body>
</html |
||
| Str4wberry Profil |
#4 · Zasláno: 18. 9. 2014, 11:48:42
Buňka tabulky nemá nic jako maximální výšku. Výška funguje jako minimální s tím, že se může zvýšit. Ani ten
table-layout: fixed na to nefunguje.
Řešení je dvojí: 1) Použít další element uvnitř buňky, kde už omezení výšky bude fungovat (ukázka). Potom je ale „ ellipsis“ k ničemu.
2) Zabránit zalamování řádku nowrapem, jak jste to měl, ale obsah potom bude jen v jednom řádku (ukázka).
Je-li cílem mít možnost zapsat více řádků a v případě dlouhého textu mít na konci posledního řádku trojtečku, budete asi muset sáhnout po JavaScriptu nebo tom šíleném CSS, co jsem odkazoval. |
||
| demonek@seznam.cz Profil |
#5 · Zasláno: 18. 9. 2014, 12:04:22
Díky za pomoc. Moc jste mi pomohl.
|
||
| Str4wberry Profil |
#6 · Zasláno: 19. 9. 2014, 09:59:32
Jaké řešení jste nakonec použil?
|
||
|
Časová prodleva: 10 let
|
|||
0