복사되지 않은 공백이있는 텍스트 표시

웹 사이트에 계좌 번호를 표시하려고합니다. 쉽게 읽을 수 있도록 몇 자리에 공백을 넣고 번호를 그룹화했습니다. 쉬운. 그러나 사용자가 그 번호를 선택하여 복사 할 때 붙여 넣을 때 텍스트에 공백이 없어야합니다. 예를 들어 글자 수에 제한이있는 온라인 은행 계좌 필드를 엉망으로 만들지 않도록하십시오.복사되지 않은 공백이있는 텍스트 표시

좋은 방법으로 문제를 해결하는 방법에 대한 아이디어가 있으십니까?

나는 다음과 같은 라인을 따라 생각하고 있지만 더 좋은 방법이 있는지 궁금해합니다.

// CSS 
span.acc_no span {display:inline-block; margin: 0 .5em} 

// HTML 
<span class="acc_no">12345<span>12</span>1234</span>

출처

2012-05-31 Svish

어떻게할까요? 번호를 복사 할 때 공백을 표시하지 않으려면 공백을 나타 내기 위해 여백이나 여백을 사용해야합니다.

CSS : 의사 태그 뒤에 :

<span class="acc_no"><span>12345</span><span>12</span><span>1234</span></span>

출처

2012-05-31 16:01:07

: last-child는 Luca

하, 그래, 그게 더 좋을거야. @luca에게 감사합니다. –

거의 같지만,이 그룹을 그룹화 할 때마다 그룹이 더 잘 보이도록 만드는 것보다이 그룹이 더 좋습니다. – Svish

또 다른 옵션

.acc_no span { 
    display:inline-block; 
    padding-left:0.5em; 
} 
.acc_no span:first-child { 
    padding-left:0; 
}

HTML을 사용하는 것입니다.

http://jsfiddle.net/chrisvenus/DUsUN/

즉, 브라우저 호환성 요구 사항에 따라 수 있지만

Here is your Account number: <span class="AccountNumber"><span>12345</span><span>12</span><span>1234</span></span> 

.AccountNumber span:before 
{ 
    content: " "; 
}

...

편집 : 복사의 구현은 브라우저에 따라 다를 수 있음을 감사 나에게 지적 jasssonpet하는 ... FF 크롬은이 방법으로 추가 된 공백을 복사하지 않습니다. IE는 않습니다. 이는 아마도 이것이 최선의 해결책은 아니지만 주목할만한 흥미로운 사실이라는 것을 의미하므로 나는 그것을 제거하지 않을 것입니다. :)

출처

2012-05-31 16:05:07 Chris

ie와 opera에 공백이 복사되었습니다 – jasssonpet

정말요? 내 테스트 (파이어 폭스) 그들은 복사되지 않았다. 보조 브라우저 호환성이있을 때 나는 복사 여부보다는 지원 여부가 더 많은지 생각하고있었습니다. :) – Chris

복사되지 않은 공백이있는 텍스트 표시

답변

관련 문제