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í textu a jeho rozkliknutí</title> <h1>Oříznutí víceřádkového textu se „Zobrazit více“</h1> <h2>Dlouhý text</h2> <div class="oriznuty-obal"> <input type="checkbox" id="zobrazit2"><label for="zobrazit2">Zobrazit vše</label> <div class="oriznuty"> <p> Dlouhý text bude po třech řádcích oříznut a překryt 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. Nemo, quisquam rem aliquid repudiandae illum fugit cumque possimus culpa voluptas consequuntur magni porro veniam. Maiores, soluta, mollitia, officia nesciunt odio libero quae praesentium molestiae fugit alias ducimus culpa at repellat. </p> </div> </div> <h2>Krátký text</h2> <div class="oriznuty-obal"> <input type="checkbox" id="zobrazit1"><label for="zobrazit1">Zobrazit vše</label> <div class="oriznuty"> <p>Krátký text bude vypadat normálně.</p> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.oriznuty p {margin: 0} .oriznuty { max-height: 3.75em; line-height: 1.25em; overflow: hidden; position: relative; } .oriznuty-obal {position: relative; width: 300px; overflow: hidden;} .oriznuty-obal input[type=checkbox] {display: none} .oriznuty-obal :checked ~ label {display: none;} .oriznuty-obal :checked ~ .oriznuty {max-height: none} .oriznuty-obal label { cursor: pointer; position: absolute; z-index: 1; top: 2.5em; right: 0; background: #fff; color: blue; text-decoration: underline; padding-left: .7em; } .oriznuty-obal label:hover {color: red}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>