盒边框内跨度

-2

每封信我有一个像下面盒边框内跨度

<span style="font-size:18px; font-weight:bold;">8342</span>

如何我把一个黑盒子周围的每个号码使用CSS跨度内的跨度？

我想它，就像下面的图片

来源

2016-11-08 vamsi

你不能。你需要把每一个数字包装到它自己的第一个元素中。 – CBroe

好的谢谢，但这个问题不值得downvoting我认为 – vamsi

除了使用JavaScript来分割字符，Razia的答案是你唯一的选择。 – George

试试这个： -

span{ 
 
border: 2px solid black ; 
 
    display: inline; 
 
}

<span style="font-size:18px; font-weight:bold; color:red">8</span> 
 
    <span style="font-size:18px; font-weight:bold; color:red">3</span> 
 
    <span style="font-size:18px; font-weight:bold; color:red">4</span> 
 
    <span style="font-size:18px; font-weight:bold; color:red">2</span>

来源

2016-11-08 12:06:29

我不会为每个号码使用单独的跨度，因为数据来自整个服务 – vamsi

好吧试试.......... –

其可能的，但有一点复杂。你需要字体等宽空间和背景图像，你把每个字母放在另一个区域，或者你把每个字母都分成了javascript！这里是没有JavaScript的一个解决方案：

span{ 
 
    background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif"); 
 
    background-size: 20px; 
 
    font-family: monospace; 
 
    font-size: 13px; 
 
    padding-left: 5px; 
 
    letter-spacing: 12px; 
 
    font-weight:bold; 
 
}

<span>8342</span>

注：这并不在IE11工作。它不加载图像。

我希望我可以帮你^^

来源

2016-11-08 12:22:28

请检查该Demo

<span style="font-size:18px; font-weight:bold;" class="test">8342</span> 

.pwn{ 
border: 2px solid black ; 
    display: inline; 
} 

var text= $(".test").html(); 
$(".test").html(''); 
for(i=0;i<=text.length-1; i++) 
{ 
var html = text.substr(i,1); 
var sp="<span style='font-size:18px; font-weight:bold;' class='pwn'>" + html 
sp+=" </span> &nbsp;"; 
$(".test").append(sp); 
}

来源

2016-11-11 04:28:35

盒边框内跨度

回答

相关问题