Разбивайте длинные слова на маленьких экранах

Question

Разбивайте длинные слова на маленьких экранах

У меня есть эта строка:

<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>

Это часть элемента кода.

То, что я пытаюсь сделать, это просмотреть строку на маленький экраны (без горизонтальной прокрутки).

Я пытался стилизовать оба <pre> а также <code> с помощью http://www.w3schools.com/css/css3_text_effects.asp — и все же линия не прерывается!

code {
width: 90%;
min-width: 200px;
background-color: white;
border: 1px solid black;
margin: auto;
font-size: 1rem;
/* ... and now what? */
}

1

css php word-wrap

Решение

Другие решения

Все, что вам нужно, это добавить: word-wrap: break-word;
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

1

code {
overflow-wrap: break-word;
}

От Mozzila Dev документация

Это работает над:

Google Chrome 4.0+
Microsoft Edge 5.5+
Firefox Mozzila 3.5+
Safari 3.1+
Опера 10.5+

0

Источник

Accepted Answer

С использованием Переполнение-обертка CSS свойство должно исправить вашу проблему

code {
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;

/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;

/* Instead use this non-standard one: */
word-break: break-word;
}

2