Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Oříznutí víceřádkového textu a „Zobrazit více“</title> <h1>Oříznutí víceřádkového textu a „Zobrazit více“</h1> <p class="oriznuty"> Krátký text bude vypadat normálně. <span onclick="zobrazit(this)" tabindex="0">Zobrazit více</span> </p> <p class="oriznuty"> Dlouhý text bude po třech řádcích oříznut a ukončen s odkazem <i>Zobrazit více</i>. Docílí se toho posicováním tohoto odkazu shora místo zdola. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, veniam, magnam, distinctio, praesentium doloribus temporibus ullam mollitia animi molestias corporis non est quo officiis sequi a cumque obcaecati tempora. <span onclick="zobrazit(this)" tabindex="0">Zobrazit více</span> </p> <p class="oriznuty"> Pokud text vyjde přesně na maximální počet řádek, zobrazí se odkaz pro zobrazení více obsahu zbytečně. <span onclick="zobrazit(this)" tabindex="0">Zobrazit více</span> </p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.oriznuty { width: 300px; max-height: 3.75em; line-height: 1.25em; overflow: hidden; position: relative; } .oriznuty span { position: absolute; top: 2.5em; right: 0; /*width: 100%;*/ background: #fff; padding-left: .5em; color: blue; text-decoration: underline; cursor: pointer; } .oriznuty span:hover, .oriznuty span:focus { color: red; }
CSS
Autoformát
CSS reset
Až na konci
function zobrazit(el) { el.parentNode.style.maxHeight = "none"; el.parentNode.removeChild(el); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>