CSS | свойство overflow-wrap

Опубликовано: 31 Января, 2022

Свойство overflow-wrap в CSS используется для указания того, что браузер может разбивать строки текста внутри любого целевого элемента, чтобы предотвратить переполнение, когда исходная строка слишком длинна, чтобы уместиться. Это свойство ранее называлось переносом по словам, которое все еще поддерживается некоторыми браузерами, но в черновике CSS3 оно было переименовано в overflow-wrap.

Синтаксис:

.коробка{
    переполнение-обертка: слово-прерывание;
}

Ценности:

normal: линии будут разорваны в соответствии с исходными правилами разрыва строки.
break-word: слова, которые слишком длинные для размещения в элементе-контейнере, разбиваются на части.
наследовать: позволяет элементу наследовать значение от своего родителя.
initial: заставляет свойство использовать значение по умолчанию.

Example:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS overflow-wrap property
    </title>
  
    <style>
        p {
            color: green;
        }
  
        .gfg {
            margin: auto;
            padding: 15px 15px;
            color: white;
            background-color: green;
            font-size: 20px;
            width: 60px;
            overflow-wrap: break-word;
        }
  
        div {
            text-align: justify;
        }
  
        h1,
        h2 {
            color: green;
        }
  
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>overflow-wrap property</h2>
    <div class="gfg">
        A computer science portal for geeks.
    </div>
</body>
  
</html>

Выход:

Picked CSS

CSS | свойство overflow-wrap

РЕКОМЕНДУЕМЫЕ СТАТЬИ