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

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>

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>

Answer 2

您可以使用pre保留格式，然后将overflow设置为scroll

我做了codepen example here

lorem ipsum的第一个块是样式的，下一个是默认pre，以显示它没有任何样式的外观。

这是你想要的吗？