html - 适合跨度框CSS中的文本？

Question

我有一个类可以处理我系统中的警告消息。这适用于大多数消息。最近我不得不输出更长的消息，导致跨度警告框中断。我不想在单独的行中打破盒子，而是希望盒子在单独的行中扩展高度和文本中断。我不确定我是否可以用 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/

如果有人知道如何解决这个问题，请告诉我。谢谢!

Answer 1

只需要制作跨度显示 block

span{
  display: block;
}

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{
  display: block;
}

span.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	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>