盒邊框內跨度

-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

盒邊框內跨度

回答

相關問題