代码之家 › 专栏 › 技术社区 › espresso_coffee

在跨度框CSS中调整文本?

css html

espresso_coffee · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

Marcogomesr 7 年前

只需要制作跨度显示块

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>