오른쪽 맞춤 기울임 꼴 텍스트 상자의 텍스트 잘림

Question

읽기 전용 텍스트 상자가 몇 개 있습니다. 그 텍스트를 이탤릭체로 만들었지 만 마지막 숫자가 잘린 텍스트를 정렬 한 숫자 필드에 대해서도 마찬가지입니다. 패딩을 추가하면 텍스트 상자가 커지지 만 이미지에서 볼 수있는 것처럼 문제를 해결하지 못합니다 (총 비용은 약 20px 패딩 및 비용은 5px 만 있음). 기울임 꼴 텍스트를 없애는 것 이외에 다른 문제를 어떻게 해결할 수 있습니까? 나는 수색 해봤고, 이것에 관해서는 아무 것도 발견하지 못했다. 만약 당신이 어딘가에 링크를 가지고 있다면 그것을 확인해 주겠다.

는 전반적으로 발생하므로이 특정 브라우저되지는, 크롬은 위의 이미지에 사용되는 하나이며 가장 눈에 띄는 변화가있다. 페이지가 처음로드 될 때 올바르게 표시되고 아무 것도 끊어지지 않습니다. 이것은 양식의 일부이므로 드롭 다운에서 다른 옵션을 선택하면 이러한 읽기 전용 상자 내의 텍스트가 변경됩니다. 즉, 문제가 발생한 시점입니다. 마치 새로운 옵션이 선택되었을 때 거의 스타일을 바꾼 것처럼 보입니다. 어떤 스타일 변경이나 클래스 변경 또는 코드의 어떤 것도 눈치 채지 못했습니다. 뭔가를 간과 할 수는 있었지만 지금까지 아무 것도 눈에 띄지 않았습니다. 여기

는 jsFiddle입니다 : jsfiddle.net/mK6JK

이 완전히 문제와 같은 스타일하지만 주요 스타일링 클래스가 추가가되지 않습니다. 문제는 바이올린에서 괜찮아 보이는 것입니다. 하지만 여전히 내 프로덕션 버전에서 문제가 있습니다.

Answer 1

아래의 HTML & css를 살펴보십시오. 모든 브라우저에서 어떤 유형의 문제도 발생하지 않습니다. HTML을

<input type="text" class="italic" value="1236" /> 

CSS는

.italic{ 
    font-style:italic; 
    padding: 10px; 
    text-align: right; 
} 

http://jsfiddle.net/SqX75/

Answer 2

나는 비슷한 문제가 있었지만 <div> 내용. 방금 width: 110%을 추가했는데 문제가 해결되었습니다. 다른 사람에게 유용 할 수 있기를 바랍니다.

Answer 3

내가 알 수있는 한, 이것은 브라우저에 따라 다르며 실제로 사라지게하는 방법은 없습니다. 입력 필드는 대체 된 요소이며, 보이고 동작하는 방식은 OS + 브라우저 조합의 영향을받습니다.

한 가지 가능한 해결 방법은 속성의 input 요소를 약 2 또는 3px로 설정하는 것입니다. 이것은 물론 모든 문자의 간격을 둡니다. 글꼴 및 디자인에 따라 이것은 끔찍한 것처럼 보일 수도 있습니다.

내가 마지막으로 수행 한 작업은 필드가 변경되었을 때 자바 스크립트를 통해 마지막에 항상 공간이 추가되도록하는 것입니다.

Answer 4

텍스트 상자의 오른쪽에 패딩을 추가해야합니다.

<imput type="text" class="classnum" /> 

하고 추가 CSS

.classnum { 
    text-align: right; 
    font-style: italic; 
    padding-right: 3px; 
}