html – 只用CSS为电话号码添加空格

概述我有一个用 HTML生成电话号码的页面,如下所示： <div class="phone">01987123456</div> 我想要的只是在数字中放一个空格,如下所示： 01987 123456 生成的数字和HTML将始终相同,但我只能访问客户端代码(HTML / CSS / Javascript / etc). 我希望找到一种方法来实现所有这一切,如果可能的话不使用Javascript,所以理想 我有一个用 HTML生成电话号码的页面,如下所示：

<div >01987123456</div>

我想要的只是在数字中放一个空格,如下所示：

01987 123456

生成的数字和HTML将始终相同,但我只能访问客户端代码(HTML / CSS / JavaScript / etc).

我希望找到一种方法来实现所有这一切,如果可能的话不使用JavaScript,所以理想情况下我正在寻找CSS或HTML的答案.

我很确定这可以在JavaScript中相当容易地完成,但是即使JavaScript被禁用,客户也希望确保电话号码格式正确(不要问).

我想要最有效和最有效的方法来将数字改为我想要的.如果有人可以弄清楚如何在数字中添加括号(例如：(01987)123456)以及仅使用CSS / HTML的空格,您将立即被标记为正确以及我永恒的感激之情.

编辑：

我认为CSS用于设计,我已经是一名网络开发人员已有15年.我真的可以用CSS黑客来制作我想要的东西,并且向客户解释网页设计的基础知识遗憾的是不是一种选择(他们认为他们知道的更好,我无法对他们做出任何决定).我有点噩梦,我需要你的帮助！

我知道content can be added to a page with CSS using content.我知道@gillesc在评论中提到的:: first-letter方法.我希望这样的事情可以帮助我.

客户端使用现代浏览器,因此CSS3解决方案就可以了.

不,我不能改变输出的HTML.

解决方法 我有兴趣看看是否可以用CSS完成,即使它不应该完成！以下是非常Hacky,理想情况下,电话号码将被格式化服务器端,或者,如果不是一个选项,使用JavaScript.

一些警告：

>这需要将属性添加到.phone以供伪元素使用.鉴于您似乎对HTML的访问权限有限,这可能是也可能不是交易破坏者
>如果电话号码格式不合适(例如01 987123456),则无法正确显示
>一个令人讨厌的小黑客用于IE,因为它不会出于某种原因使用ch正确计算伪元素的宽度.归功于SW4：https://stackoverflow.com/a/20541859
>需要纯色背景色

这背后的一般想法如下：

> .phone

> text-indent：1ch; on .phone将整个文本向左移动一个字符
> .phone设置为position：relative;允许伪元素相对于它定位
> white-space：nowrap;确保如果数字中断,这不会换行到新行

> .phone：之前

>背景颜色：白色;屏蔽.phone中的数字
> border-right：1ch纯白色;隐藏.phone中的第六个数字,实际上这是空格
>内容：attr(数据电话);使用.phone上的data-phone属性来填充具有相同编号的伪元素

> left：0;,position：absolute;和顶部：0;用于定位伪元素
>溢出：隐藏;隐藏超过5个字符限制的任何字符
> text-indent：0;重置text-indent：1ch;设置.phone
>宽度：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
<div  data-phone="01987123456">01987123456</div>
) and (min-resolution: +72dpi) {    .phone:before {        wIDth: 5.8ch;    }}

Js小提琴：https://jsfiddle.net/scarjnb1/

总结

以上是内存溢出为你收集整理的html – 只用CSS为电话号码添加空格全部内容，希望文章能够帮你解决html – 只用CSS为电话号码添加空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。