Text overflows past container and loses its original formatting

Question

I am trying to display text inside a container. The value of the text itself is formatted but when I add it to the block the format is condensed and it overflows past the box.

How can I keep the format of the text as well as add a scrollbar in the container to keep it from overflowing?

The span value as shown escapes the container but if you look above in the grey area the value itself is formatted correctly upon inspection

Snippet:

.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>

add the `overflow: scroll` to the `.container-card` not the `span`. — Manuel Otto, May 01 '18 at 14:09
First of all, you can't keep the formatted markup as you've written it, browser will parse HTML and display it as plain text. Check here if you want to display it as code: https://stackoverflow.com/questions/37789148/how-to-display-html-code-in-a-html-page-in-a-formatted-manner — appostolis, May 01 '18 at 14:11

score 3 · Accepted Answer · answered May 01 '18 at 14:17

use overflow-y for the container not the span, and use <pre> to display formatted code :

.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>

Thanks this is what I was looking for – Jebathon May 01 '18 at 14:18 — Jebathon, May 01 '18 at 14:18

score 2 · Answer 2 · answered May 01 '18 at 14:16

2

You can use pre to keep the formatting and then set the overflow to scroll

I made a codepen example here

The first block of lorem ipsum is styled, the next is default pre to show how it looks without any styling.

Is this what you want?

answered May 01 '18 at 14:16

Marc Hjorth

1,797
2
18
24

Text overflows past container and loses its original formatting

2 Answers2