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

Question

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

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

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

片段：

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

标签： htmlcss

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>