Текст выходит за пределы контейнера и теряет исходное форматирование
Я пытаюсь отобразить текст внутри контейнера. Значение самого текста форматируется, но когда я добавляю его в блок, формат сжимается и выходит за пределы поля.
Как сохранить формат текста, а также добавить полосу прокрутки в контейнер, чтобы он не переполнялся?
Показанное значение диапазона выходит за пределы контейнера, но если вы посмотрите выше в серой области, само значение отформатировано правильно после проверки.
Фрагмент:
.container-card {
/* Add shadows to create the "card" effect */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
height: 20vh;
}<div class = "container">
<span style = "overflow: scroll !important;">Some text</span>
</div>Прежде всего, вы не можете сохранить отформатированную разметку в том виде, в котором вы ее написали, браузер проанализирует HTML и отобразит его как простой текст. Отметьте здесь, если вы хотите отображать его как код: stackoverflow.com/questions/37789148/…
Ответы 2
Вы можете использовать pre, чтобы сохранить форматирование, а затем установить overflow на scroll.
Я сделал пример кода здесь
Первый блок lorem ipsum оформлен, следующий - это pre по умолчанию, чтобы показать, как он выглядит без какого-либо стиля.
Это то, что вы хотите?
используйте overflow-y для контейнера, а не span, и используйте <pre> для отображения отформатированного кода:
.container {
/* Add shadows to create the "card" effect */
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
transition: 0.3s;
height: 50vh;
overflow-y: scroll;
}<div class = "container">
<pre>
DECLARE N INTEGER;
SET N = 1;
FOR C
AS C_USR_MISE_A_JOUR
CURSOR FOR
SELECT USR_ID, USR_NOM
FROM T_UTILISATEUR_USR
ORDER BY USR_ID
FOR UPDATE OF USR_NOM
DO
IF MOD(N, 2) = 0
THEN
UPDATE T_UTILISATEUR_USR
DECLARE N INTEGER;
SET N = 1;
FOR C
AS C_USR_MISE_A_JOUR
CURSOR FOR
SELECT USR_ID, USR_NOM
FROM T_UTILISATEUR_USR
ORDER BY USR_ID
FOR UPDATE OF USR_NOM
DO
IF MOD(N, 2) = 0
THEN
UPDATE T_UTILISATEUR_USR
DECLARE N INTEGER;
SET N = 1;
FOR C
AS C_USR_MISE_A_JOUR
CURSOR FOR
SELECT USR_ID, USR_NOM
FROM T_UTILISATEUR_USR
ORDER BY USR_ID
FOR UPDATE OF USR_NOM
DO
IF MOD(N, 2) = 0
THEN
UPDATE T_UTILISATEUR_USR
</pre>
</div>Спасибо это то, что я искал
Добавьте
overflow: scrollк.container-card, а не кspan.