Question

我需要前端的帮助。是否可以在不破坏HTML的情况下设置数字（字符串）的样式？

我希望它在HTML中看起来像：

 <div>Dodano: <span>127</span> stylizacji</div>

我想要获得的效果应如下所示： link to Dropbox

Answer 1

这是完全没有更改HTML的CSS解决方案。但是，我确实为背景创建了一个自定义图像，以便在数字后面显示。你必须调整大小才能理解你的网站。

使用带有矩形的重复背景，右侧有一个小空格，以“隔开”数字。使用letter-spacing可以在数字之间留出更多空间。

background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;

请参阅示例：http://jsfiddle.net/amyamy86/6FaLd/

Answer 2

你可以使用伪元素＆＃34;＆＃34;它可以正常使用任意数量的数字而不会破坏html。您将需要第一个答案的背景图像。

span {
    background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
    color: white;
    display: inline-block;
    font-size: 53px;
    letter-spacing: 21px;
    padding-left:8px;
    position:relative;
    margin-left:10px;
    margin-right:-2px;
}
span:after {
    content:'';
    display:block;
    position:absolute;
    width:8px;
    height:66px;
    background:#fff;
    top:0;
    right:0;
}

以下是JSFIDDLE

的示例

Answer 3

您可以将样式应用于span元素。

<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>

Answer 4

   <div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding:      27px;">
     Dodano:
     <span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
     <span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
     <span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span> 
     stylizacji

   </div>

SPAN中的样式编号

4 个答案: