background-color на встроенных элементах без встроенного дополнения

Я хочу, чтобы фоновый цвет обернулся точно вокруг встроенных символов.background-color на встроенных элементах без встроенного дополнения

не могу объяснить это лучше так вот изображение, показывающее в точности то, что я хочу:

desired effect

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; 
}

Если это может» t можно сделать только с помощью CSS, может ли JavaScript помочь?

Here's a codepen

источник

2015-05-22 thomasdecrick

Это будет работать только тогда, когда глифы шрифта все имели точно такие же показатели, например если каждая прописная буква имеет ту же ширину и высоту, или если края каждого символа касаются краев глифов и т. д. – BoltClock

Попробуйте это:

<!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>

источник

2015-05-22 10:04:24 Rayon

попробовать это:  HTML Text   блок -   HTML Text   блок 

источник

2015-05-22 10:14:38 sudo

background-color на встроенных элементах без встроенного дополнения

ответ

Смежные вопросы