01987123456
Geek Answers Handbook

Add space to phone number using CSS only

I have a page that generates a phone number in HTML, for example:

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

I want to just put a space inside the number, for example:

01987 123456

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

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

I'm sure this can be done quite easily in Javascript, but the client wants to make sure that the phone number is formatted correctly even if Javascript is disabled (do not ask).

I want the most efficient and effective way to change the number to what I want. If someone can understand how to add brackets to the number (for example:) (01987) 123456, as well as a space using only CSS / HTML, you will immediately get a mark as correct, as well as my eternal thanks.

EDIT:

I get that CSS for design, Ive been a web developer for 15 years. I could really do it with a CSS hack to produce what I want and explain to the client that the basics of web design are unfortunately not an option (they think they know better and I can't do anything to them dictate). I'm a little in a nightmare situation and I need your help!

, CSS content. ::first-letter, @gillesc . , - .

, CSS3 .

, HTML.

+4
2

, CSS, ! , , , JavaScript.

:

:

  • .phone
    • text-indent: 1ch; .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; top: 0;
  • overflow: hidden; 5
  • text-indent: 0; text-indent: 1ch; .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>
Hide result

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

+2

CSS, JavaScript. :

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

<script>
    var el = document.getElementById('phone');
    phone.innerText = phone.innerText.replace(/^(\d{5})/, '($1) ');
</script>
+3

More articles:


All Articles