html - 文本溢出容器并失去其原始格式

Question

我正在尝试在容器内显示文本。文本本身的值已格式化，但当我将其添加到 block 时，格式被压缩并溢出框。

如何保持文本的格式并在容器中添加滚动条以防止其溢出？

所示的跨度值脱离了容器，但如果您在上方的灰色区域中查看，则值本身在检查时格式正确

片段:

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

Answer 1

使用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>