여분의 공간

Question

나는 것을 통보했습니다 텍스트 - 변환, 파이어 폭스는 텍스트의 끝 부분에 공간을 추가합니다. 데모보기 : http://jsfiddle.net/matias/kt71jkLz/

또한 firebug를 사용하여 해당 CSS 규칙을 켜고 끄면 Firefox는 해당 공간을 제거하고 다시 추가하지 않습니다. Chrome은이 공간을 전혀 추가하지 않습니다.

HTML

<span>Sample text</span> 

CSS

span{display:inline-block; color: red; outline: 1px solid blue;} 
span:first-letter{text-transform: uppercase;} 

이 문제를 해결하는 방법에 어떤 아이디어?

Answer 1

나는 이것이 약간 오래되었다는 것을 알고 있지만 이메일 캠페인 중 하나에서 같은 문제가 발생하여 해결 방법을 찾았습니다. A의

: 보낸 후

span[class=capital] { 
    text-transform:uppercase !important;} 

Outlook에서 최종 이메일에 표시이 결과 : 모바일 CSS에서이 같은으로 단락

을

p aragraph 

에서 FF 로컬에서는 전체 너비와 응답 너비에서는 괜찮 았지만 전자 메일을 보낸 후에 공간은 두 버전 모두에서 나타났습니다 (그러나 적절한 텍스트 - 트랜스 양식을 작성하십시오.

필자의 경우 해결책은 처음 단어가 아닌 스팬에 전체 단어를 래핑하고 텍스트 변환을 "자본화"로 변경하는 것이 었습니다.

span[class=capital] { 
    text-transform:capitalize !important;} 

단어 뒤의 공백에는 영향을주지 않습니다. 여분의 공간이 없습니다.