适合跨度框CSS中的文本？

我有类应该处理我的系统中的警告消息。这对大多数消息起作用。最近我不得不输出更长的信息，并导致跨度警告框中断。我不希望在单独的一行中打破这个框，而是希望这个框在单独的行中展开高度和文本中断。我不确定我是否可以通过CSS实现。这是我的工作例如：适合跨度框CSS中的文本？

span.info, .success, .warning, .error { 
    border: 1px solid; 
    margin: 5px; 
    padding:5px 10px 5px 40px; 
    background-repeat: no-repeat; 
    background-position: 10px center; 
    border-radius: 3px; 
} 

span.warning { 
    color: #9F6000; 
    background-color: #FEEFB3; 
    background-image: url('../Images/warning.png'); 
}

https://jsfiddle.net/dmilos89/jhhabr1u/

如果有谁知道这是如何固定的，请让我知道。谢谢！

来源

2017-08-03 espresso_coffee

提供代码。 SO不允许没有补充代码的jsfiddle链接，所以你显然已经看到了这个消息，因为你试图通过把你的URL作为“代码”来“欺骗” –

'span'是一个内联元素。将它设置为'display：block' –

只需要使跨度显示块

span{ 
    display: block; 
}

span.info, .success, .warning, .error { 
 
\t border: 1px solid; 
 
\t margin: 5px; 
 
\t padding:5px 10px 5px 40px; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 10px center; 
 
\t border-radius: 3px; 
 
} 
 
span{ 
 
    display: block; 
 
} 
 

 
span.warning { 
 
\t color: #9F6000; 
 
\t background-color: #FEEFB3; 
 
\t background-image: url('../Images/warning.png'); 
 
}

<span class="warning">This user already exist in the system. Check the name and DOB and if the information is correct please contact your administrator.</span>

来源

2017-08-03 15:35:54

如果你这样做，考虑使用div。 – isherwood

@isherwood你的意思是把跨度放在div元素内？ –

编号跨度旨在成为内联元素。如果你强制显示块，为什么不使用适当的块级元素？ – isherwood

适合跨度框CSS中的文本？

回答

相关问题