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 neznámé délky</title> <h1>Oříznutí víceřádkového textu neznámé délky</h1> <p class="oriznuty"> Krátký text bude vypadat normálně. </p> <p class="oriznuty"> Dlouhý text bude po třech řádcích oříznut a ukončen výpustkou. Docílí se toho posicováním 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. 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>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.oriznuty { width: 300px; max-height: 3.75em; line-height: 1.25em; overflow: hidden; position: relative; } .oriznuty:after { content: "…"; position: absolute; width: 20%; top: 2.5em; right: 0; background: #fff; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>