HTML 입력 필드에서 텍스트 오버 플로우 줄임표를 사용하는 방법은 무엇입니까?

Question

내 웹 페이지는 입력 필드가 나는 다음과 같은 CSS를 적용한되는 :

.ellip { 
    white-space: nowrap; 
    width: 200px; 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
} 

그러나 이것은 어떤 영향을 미칠 것 같지 않습니다. 여기에 분명한 내용이 없거나 CSS 만 사용하여 입력란에 줄임표를 사용할 수 없습니까?

Answer 1

필드는 자체 규칙이있는 요소입니다. 입력 필드는 텍스트가 필드보다 길어지면 텍스트가 보이지 않게되는 방식으로 구현됩니다.

이유는 양식에서 필드를 사용하고 text-overflow ellipsis를 사용할 수 있다면 원하는 효과가 아닌 잘린 내용 만 전송하기 때문입니다.

Answer 2

Chrome, Safari 및 Firefox에서 테스트가 지원됩니다.

그러나 약간 다른 효과가 있습니다.

흐림 효과 Firefox는 텍스트 상자의 오른쪽에 숨겨진 텍스트가있는 경우에만 텍스트 오른쪽에 ...을 추가합니다.

흐림 효과가있는 반면 Chrome은 텍스트의 스크롤 위치를 벗어난 곳에 관계없이 텍스트의 시작 부분으로 이동하여 끝에 ... 추가합니다.

Answer 3

이 질문은 오래된 질문이지만 동일한 문제가있어서 this blog post from Front End Tricks And Magic이 나를 위해 일하므로 사람들이 여전히 궁금해 할 때를 대비하여 공유 할 것이라고 생각했습니다. 블로그의 요지는 입력이 readonly 속성을 가지고있는 경우에만 IE의 입력에서 줄임표를 사용할 수 있다는 것입니다.

분명히 많은 시나리오에서 입력에 읽기 전용 속성을 사용하지 않으려합니다. 어떤 경우에는 JavaScript를 사용하여 토글 할 수 있습니다. 이 코드는 블로그에서 직접 가져옵니다. 따라서이 답변이 도움이된다면 블로그를 확인하고 작성자에게 감사의 말을 남기는 것이 좋습니다.

HTML :

<div class="long-value-input-container"> 
    <input type="text" 
    value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long- 
    value-input" readonly /> 
</div> 

CSS : (jQuery를 사용하여)

.long-value-input { 
    width: 200px; 
    height: 30px; 
    padding: 0 10px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

자바 스크립트 자체가 나를 위해 속임수를 썼는지 입력에 text-overflow:ellipsis 설정

// making the input editable 
$('.long-value-input').on('click', function() { 
    $(this).prop('readonly', ''); 
    $(this).focus(); 
}) 

// making the input readonly 
$('.long-value-input').on('blur', function() { 
    $(this).prop('readonly', 'readonly'); 
}); 

Answer 4

. 입력이 초점이 맞지 않으면 줄임표를 자르고 위치시킵니다.