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>. 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, odkaz pro zobrazení více obsahu poslední řádek překryje. <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%; text-align: right; background: #fff; 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>