Я пытаюсь предотвратить перенос точки и других знаков пунктуации после встроенных блоков (с определенным классом) на следующую строку. Я хочу избежать обтекания встроенного блока и последующей пунктуации его в теге no-wrap, поскольку для этого необходимо заранее знать, где могут возникнуть все эти ситуации, а я этого не знаю. Я мог бы использовать JavaScript для внедрения этой структуры везде, где это необходимо, но я бы хотел избежать ее, если это возможно, так как моя интуиция заключается в том, что это может запутаться.
Требуется сохранить фон и отступы, поэтому display: contents не будет работать :
display: contents означает, что div не генерирует никаких блоков, поэтому его фон, границы и отступы не отображаются. Однако унаследованные свойства, такие как цвет и шрифт, оказывают ожидаемое влияние на дочерний элемент (элемент span).
Мой вопрос состоит из двух частей: можно ли это сделать без тега вокруг встроенного блока и знаков препинания, и, если да, то как?
Снимок экрана (из Firefox 62 на macOS 10.13.6) на случай, если различия в рендеринге маскируют проблему:
div {
width: 309px;
background: #EEE;
}
span.help-block {
width: 111px;
background: #DDD;
}
span.inline-code {
display: inline-block;
background: #CCC;
color: #333;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
margin-top: -1px;
padding-bottom: 1px;
margin-bottom: -1px;
font-family: Courier, Monaco, monospace;
font-size: .9em;
}
<div>
<span class="help-block">To escape commas, put quotes around the value, e.g., <span class="inline-code">a,b,c,"a,b,c"</span>. To escape those quotes, double them, e.g., <span class="inline-code">a,b,"a,""b"",c"</span>.</span>
</div>
https://jsfiddle.net/don01001100/ravjykdb/9/