CSS Lastnost: word-break

Lastnost word-break (slo. Prelom besed) določa, kako naj se besede prelomijo, ko dosežejo konec vrstice.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Prelom besed na koncu vrstice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 30px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
        }
        .primer {
            flex: 1;
            min-width: 250px;
            max-width: 300px;
            padding: 20px;
            background-color: white;
            color: black;
            border-radius: 8px;
            -webkit-text-fill-color: black;
        }
        .naslov {
            color: #2196F3;
            font-weight: bold;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
            -webkit-text-fill-color: #2196F3;
        }
        .opis {
            color: #388e3c;
            font-size: 0.9em;
            margin-bottom: 15px;
            font-style: italic;
            -webkit-text-fill-color: #388e3c;
        }
        .vsebina {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border: 1px dashed #ddd;
            height: 300px;
            overflow: auto;
        }
        
        /* word-break primeri */
        .normal .vsebina { word-break: normal; }
        .break-word .vsebina { word-break: break-word; }
        .break-all .vsebina { word-break: break-all; }
        .keep-all .vsebina { word-break: keep-all; }
    </style>
</head>
<body>
    <div class="container">
        <!-- Normal -->
        <div class="primer normal">
            <div class="naslov">word-break: normal</div>
            <div class="opis">Privzeto obnašanje - besede se prelomijo na običajnih mestih.</div>
            <div class="vsebina">
                <p>To je primer dolgega besedila z nekaj res dolgimibesedamibrezpresledkov12345678900987654321 
                in običajnimi besedami, ki prikazuje, kako se besedilo prelomi na koncu vrstice.</p>
            </div>
        </div>

        <!-- Break Word -->
        <div class="primer break-word">
            <div class="naslov">word-break: break-word</div>
            <div class="opis">Besede se prelomijo le, če je nujno potrebno.</div>
            <div class="vsebina">
                <p>To je primer dolgega besedila z nekaj res dolgimibesedamibrezpresledkov12345678900987654321 
                in običajnimi besedami, ki prikazuje, kako se besedilo prelomi na koncu vrstice.</p>
            </div>
        </div>

        <!-- Break All -->
        <div class="primer break-all">
            <div class="naslov">word-break: break-all</div>
            <div class="opis">Besede se lahko prelomijo kjerkoli, tudi sredi besede.</div>
            <div class="vsebina">
                <p>To je primer dolgega besedila z nekaj res dolgimibesedamibrezpresledkov12345678900987654321 
                in običajnimi besedami, ki prikazuje, kako se besedilo prelomi na koncu vrstice.</p>
            </div>
        </div>

        <!-- Keep All -->
        <div class="primer keep-all">
            <div class="naslov">word-break: keep-all</div>
            <div class="opis">Ohranja vse besede cele, tudi če presegajo širino vsebnika.</div>
            <div class="vsebina">
                <p>To je primer dolgega besedila z nekaj res dolgimibesedamibrezpresledkov12345678900987654321 
                in običajnimi besedami, ki prikazuje, kako se besedilo prelomi na koncu vrstice.</p>
            </div>
        </div>
    </div>
</body>
</html>
REZULTAT