適合跨度框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中的文本？

回答

相關問題