我想渲染一些文本，比如 from <span >ABCD</span>to A | B | C | D。
' | ' 不應將其呈現為普通文本，因為它會降低螢屏閱讀器的可訪問性。
也許我可以用 JavaScript 做到這一點，比如
- 拆分文本
- 加入他們
<span >，在哪里.dividier:not(:last-child)::after { content: ' | '; } - 應用結果
但我認為這不是一個好方法。我不想更改 html 本身。
只有 CSS才有可能嗎？
uj5u.com熱心網友回復：
使用javascript，您可以使用.split('')字串并將其拆分為字符陣列，然后使用.join(' | ')將陣列重新組合成具有所需字符的字串。
el.textContent.split('').join(' | ');
let divided = document.querySelector('.divided');
divided.textContent = divided.textContent.split('').join(' | ');<span class="divided">ABCD</span>uj5u.com熱心網友回復：
一個純 CSS 的想法，但你需要一個等寬字體
.divided {
font-family: monospace;
font-size: 50px;
letter-spacing: 10px;
background:
repeating-linear-gradient(90deg,#000 0 3px,#0000 0 calc(1ch 10px))
-6.5px 50%/100% 80% no-repeat;
/*-6.5px = -(5 1.5) half the letter-spacing 3px
1ch = width of one letter
3px = width of the seperator
80% = height of the seperator
*/
}<span class="divided">ABCD</span>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410707.html
標籤：
下一篇：向下滾動時頂部帶有固定列的引導表