I want the background-color to wrap exactly around the inline characters.
Can't explain it any better so here's an image showing exactly what I want:
HTML
<div>
<span>HTML Text block - HTML Text block</span>
</div>
CSS
div {
max-width: 300px;
line-height: 1.5;
text-transform: uppercase;
}
span {
background-color: white;
box-shadow: 5px 5px 0 black;
padding: 0;
}
If it can't be done with CSS alone, can JavaScript be of any help?
Try this:
<!doctype html>
<html>
<head>
<title>Layout Experiments</title>
<style>
*{
-webkit-box-sizing :border-box;
-moz-box-sizing :border-box;
box-sizing :border-box;
}
div{
max-width :300px;
line-height :1.5;
text-transform :uppercase;
height :200px;
background :wheat;
}
span{
background-color :white;
box-shadow :5px 5px 0 black;
padding :0;
}
</style>
</head>
<body>
<div>
<span>HTML Text block - HTML Text block HTML Text block - HTML Text block</span>
</div>
</body>
</html>
试试这个: <span>
HTML Text <br>
block <br>
HTML Text <br>
block </span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.