我有一个生成 HTML 电话号码的页面，如下所示：
<div class="phone">01987123456</div>
我想要的只是在数字内添加一个空格，如下所示：
01987 123456
生成的数字和 HTML 始终相同，但我只能访问客户端代码（HTML / CSS / Javascript / 等）。
如果可能的话，我想找到一种在不使用 Javascript 的情况下实现所有这些的方法，所以理想情况下我正在 CSS 或 HTML 中寻找答案。
我很确定这可以在 Javascript 中相当容易地完成，但客户希望确保电话号码的格式正确，即使 Javascript 被禁用（不要问）。
我想要以最有效且高效的方式将号码更改为我想要的号码。如果有人能弄清楚如何在数字中添加括号（如下所示：(01987) 123456）以及仅使用 CSS/HTML 的空间，您将立即被标记为正确以及我永远的感激之情。
EDIT:
我知道 CSS 是为了设计而设计的，我已经成为一名 Web 开发人员 15 年以上了。我确实可以通过 CSS hack 来生成我想要的东西，但不幸的是，向客户解释网页设计的基础知识并不是一个选择（他们认为他们更了解，而我无法向他们指示任何事情）。我的处境有点噩梦，我需要你的帮助！
我知道可以使用 CSS 将内容添加到页面content https://css-tricks.com/css-content/。我知道::first-letter@gillesc 在评论中提到的方法。我希望这样的事情可以帮助我。
客户端使用现代浏览器，因此 CSS3 解决方案就可以了。
不，我无法更改输出的 HTML。
我有兴趣看看这是否could可以用 CSS 来完成，即使它不应该做完了！下面的内容相当 hacky，理想情况下，电话号码将在服务器端进行格式化，或者，如果这不是一个选项，则使用 JavaScript。
一些注意事项：
- 这需要添加一个属性
.phone供伪元素使用。鉴于您对 HTML 的访问似乎有限，这可能会或可能不会破坏交易
- 如果电话号码的格式不合适（例如 01 987123456），它将无法正确显示
- IE 使用了一个令人讨厌的小技巧，因为它不计算
width伪元素的正确使用ch因为某些原因。这要归功于 SW4：https://stackoverflow.com/a/20541859 https://stackoverflow.com/a/20541859
- 需要纯色背景
这背后的总体思路如下：
-
.phone
-
text-indent: 1ch; on .phone将整个文本向左移动一个字符
-
.phone被设定为position: relative;允许伪元素相对于它定位
-
white-space: nowrap;确保如果数字中有中断，这不会换行到新行
-
.phone:before
-
background-color: white;掩盖数字.phone
-
border-right: 1ch solid white;隐藏第六位数字.phone，实际上这是空间
-
content: attr(data-phone);使用data-phone属性上.phone用相同的数字填充伪元素
-
left: 0;, position: absolute; and top: 0;用于定位伪元素
-
overflow: hidden;隐藏超过 5 个字符限制的任何字符
-
text-indent: 0; resets text-indent: 1ch; set on .phone
-
width: 5ch;确保伪元素只有 5 个字符长
- 奇怪的媒体查询是针对 IE 的黑客攻击
已在 FF 38.0.5、Chrome 43.0.2357.124 m 和 IE 11 中测试并工作。不支持的浏览器ch设备（例如 Opera 12.17 和 Windows Safari 5.1.7）似乎显示自然状态下的电话号码。
.phone {
position: relative;
text-indent: 1ch;
white-space: nowrap;
}
.phone:before {
background-color: white;
border-right: 1ch solid white;
content: attr(data-phone);
display: block;
left: 0;
overflow: hidden;
position: absolute;
text-indent: 0;
top: 0;
width: 5ch;
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
.phone:before {
width: 5.8ch;
}
}
<div class="phone" data-phone="01987123456">01987123456</div>
JSFiddle： https://jsfiddle.net/scarjnb1/ https://jsfiddle.net/scarjnb1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
