CSS Lastnost: overflow-wrap

Lastnost overflow-wrap določa, ali lahko brskalnik prekine vrstice z dolgimi besedami, če te zapolnijo zabojnik.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>overflow-wrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 1px solid black;
        }
        div.a {
            overflow-wrap: normal;
        }
        div.b {
            overflow-wrap: anywhere;
        }
        div.c {
            overflow-wrap: break-word;
        }
    </style>
</head>
<body>
<h3>overflow-wrap: normal;</h3>
<div class="a">Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem
    IpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsum je v uporabi že več kot petsto let, saj je to
    kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</div>

<h3>overflow-wrap: anywhere;</h3>
<div class="b">Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem
    IpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsum je v uporabi že več kot petsto let, saj je to
    kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</div>

<h3>overflow-wrap: break-word;</h3>
<div class="c">Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem
    IpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsumIpsum je v uporabi že več kot petsto let, saj je to
    kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</div>
</body>
</html>

REZULTAT