仅使用CSS在电话号码中添加空格 [英] Adding a space to a phone number with just CSS

问题描述

我有一个页面可以生成HTML格式的电话号码，例如：

 < div class = phone > 01987123456< / div> 
  

我想要的是简单地在数字内放一个空格，就像这样：

  01987 123456 
  

生成的数字和HTML将始终相同，但是我只能访问客户端代码（HTML / CSS / Javascript等）。

我想找到一个尽可能不使用Javascript来实现所有这些目的的方法，因此理想情况下，我正在寻找CSS或HTML的答案。

我很确定这可以公平地完成

我想要最有效和最有效的方法，但是即使禁用了Javascript，客户也希望确保电话号码格式正确（即使不启用Java也不要求）。将号码更改为我想要的有效方式。如果有人知道如何在数字上加上方括号（例如：[phone] ）以及仅使用CSS / HTML的空格，您将立即被标记为正确和我永远的感激。

---

编辑：

我知道CSS是用于设计的，我从事Web开发已有15年以上。我真的可以用CSS hack来产生我想要的东西，不幸的是，不能向客户解释Web设计的基础知识（他们认为他们了解得更多，而且我无权向他们要求任何东西）。我有点恶梦，需要您的帮助！

我知道内容可以使用 content 添加到带有CSS的页面中。我知道@gillesc在评论中提到的 :: first-letter 方法。我希望这样的事情对我有帮助。

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

不，我不能更改输出的HTML。

解决方案

我很想看看这个可以用CSS完成，即使不应该完成！以下内容非常骇人，理想情况下，电话号码应设置为服务器端格式，或者如果不是这样，则可以使用JavaScript。

注意事项：

• 这需要将属性添加到 .phone 供使用的伪元素。鉴于您似乎对HTML的访问权限有限，所以这可能不是交易突破点。


• 如果电话号码的格式不正确（例如01 987123456），它将不能正确显示


• IE使用了一个讨厌的小技巧，因为它不能使用<正确计算伪元素的宽度 code> ch 由于某种原因。为此可归功于SW4： https://stackoverflow.com/a/20541859


• 需要纯色背景颜色

其背后的总体思路如下：

• .phone
  
  
  
  
  • 文本缩进：1ch； 上的。电话将整个文本向左移动一个字符
  
  
  • .phone 设置为 position：relative; 允许伪元素相对放置
  
  
  • white-space：nowrap; 可以确保如果中断，则不会换行号码
  
  


• .phone：之前
  
  
  
  
  • background-color：white; 掩盖 .phone
    
  • border-right：1ch纯白色； 隐藏 .phone 中的第六位数字，实际上，这是空格
  
  
  • 内容：attr（数据电话）; 在<$ c上使用数据电话属性$ c> .phone 填充具有相同编号的伪元素
  
  


• 左：0； ，位置：绝对； 和 top：0； 用于：放置伪元素


• 溢出：隐藏； 隐藏超过5个字符限制的所有字符


• 文本缩进：0; 重置文本缩进：1ch; 在上设置.phone


• 宽度：5ch； 确保伪元素只有5个字符长


• 奇怪的媒体查询是针对IE的黑客

经过测试并在FF 38.0.5，Chrome 43.0中工作.2357.124 m和IE11。不支持 ch 单元的浏览器（例如Opera 12.17和Windows Safari 5.1.7）似乎显示电话号码处于自然状态。 / p>

  .phone {职位：相对文字缩进：1ch； white-space：nowrap;}。phone：before {background-color：white;右边框：1ch纯白色；内容：attr（数据电话）；显示：块；左：0；溢出：隐藏；位置：绝对；文字缩进：0；最高：0; width：5ch;} @媒体屏幕和（min-width：0\0）和（min-resolution：+ 72dpi）{.phone：before {width：5.8ch; }}  

 < div class = phone data- phone = 01987123456> 01987123456< / div>  

JS Fiddle：： https://jsfiddle.net/scarjnb1/

I have a page which generates a phone number in HTML, like this:

<div class="phone">01987123456</div>

What I want is to simply put a space inside the number, like so:

01987 123456

The generated number and HTML will always be the same, but I only have access to client side code (HTML / CSS / Javascript / etc).

I want to find a way of achieving all of this without using Javascript if possible, so Ideally I am looking for an answer in CSS or HTML.

I'm pretty sure this could be done fairly easily in Javascript, but the client wants to make sure the phone number is formatted correctly even if Javascript is disabled (don't ask).

I want the most effective and efficient way of changing the number to what I want. If someone can figure out how to add brackets to the number (like this: [phone]) as well as the space using just CSS/HTML you will immediately get marked as correct as well as my eternal gratitude.

---

EDIT:

I get that CSS is for design, Ive been a web developer for 15+ years. I could really do with a CSS hack to produce what I want, and explaining to the client the basics of web design is unfortunately not an option (they think they know better and I am in no position to dictate anything to them). I'm in a bit of a nightmare situation, and I need your help!

I know that content can be added to a page with CSS using content. I am aware of the ::first-letter method that @gillesc mentions in the comments. I was hoping something like this might help me.

The client uses modern browsers so a CSS3 solution would be fine.

And no, I cant change the outputted HTML.

解决方案

I was interested to see if this could be done with CSS, even if it shouldn't be done! The following is quite hacky, ideally the phone number would be formatted server side or, if that isn't an option, with JavaScript.

A few caveats:

• This requires an attribute to be added to .phone for the pseudo element to use. This may or may not be a deal breaker given that you seem to have limited access to the HTML
• If the phone number is not in a suitable format (e.g. something like 01 987123456) it will not display correctly
• A nasty little hack is used for IE as it doesn't calculate the width of the pseudo element correctly using ch for some reason. Credit to SW4 for this: https://stackoverflow.com/a/20541859
• A solid background colour is required

The general idea behind this is as follows:

• .phone
  • text-indent: 1ch; on .phone moves the whole text to the left by one character
  • .phone is set to position: relative; to allow the pseudo element to be positioned relatively to it
  • white-space: nowrap; ensures that this doesn't wrap onto a new line if there is a break in the number
• .phone:before
  • background-color: white; masks the digits in .phone
  • border-right: 1ch solid white; hides the sixth digit in .phone, in effect this is the space
  • content: attr(data-phone); uses the data-phone attribute on .phone to populate the pseudo element with the same number
• left: 0;, position: absolute; and top: 0; are used to position the pseudo element
• overflow: hidden; hides any characters over the 5 character limit
• text-indent: 0; resets text-indent: 1ch; set on .phone
• width: 5ch; ensures that the pseudo element is only 5 characters long
• The weird media query is the hack to target IE

Tested and working in FF 38.0.5, Chrome 43.0.2357.124 m and IE 11. Browsers not supporting the ch unit (such as Opera 12.17 and Windows Safari 5.1.7) seem to show the phone number in its natural state.

.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>

JS Fiddle: https://jsfiddle.net/scarjnb1/

这篇关于仅使用CSS在电话号码中添加空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！