How to Use Text-Overflow Ellipsis in an HTML Input Field

How to use text-overflow ellipsis in an html input field?

I know this is an old question, but I was having the same problem and came across this blog post from Front End Tricks And Magic that worked for me, so I figured I'd share in case people are still curious. The gist of the blog is that you CAN do an ellipsis in an input in IE as well, but only if the input has a readonly attribute.

Obviously in many scenarios we don't want our input to have a readonly attribute. In which case you can use JavaScript to toggle it. This code is take directly from the blog, so if you find this answer helpful you might consider checking out the blog and leaving a comment of appreciation to the author.

// 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');});
.long-value-input {  width: 200px;  height: 30px;  padding: 0 10px;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="long-value-input-container">  <input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly /></div>

How to set text-overflow ellipsis correctly for an input element using css and html?

You have to add the text-overflow: ellipsis; property on the input itself instead of wrapper

.wrapper {
min-width: 0px;
max-width: 100%;
padding: 14px 16px;
line-height: 21px;
position: relative;
max-height: 49px;
}

.input {
display: inline-block;
line-height: 1.5;
padding: 5px 7px 4px;
min-height: 20px;
margin: 0px;
text-overflow: ellipsis;
}
<div class="wrapper">
<input class="input">
</div>

text-overflow: ellipsis is not working for input in IE but working fine in other

<input type="text" value="This element is an input" readonly/>

https://jsfiddle.net/kvuvkzeL/

Make it editable :

    $( '.INPUT_CLASS' ).on( 'click', function() {
$( this ).prop( 'readonly', '' );
$( this ).focus();
})

$( '.INPUT_CLASS' ).on( 'blur', function() {
$( this ).prop( 'readonly', 'readonly' );
})

Text input remaining horizontally scrollable with text-overflow: ellipsis in Chrome

I believe it's a known Chrome issue. You can work around it with a little bit of JavaScript, if that works for you?

You may want to look to target Chrome only.

//Locate all elements with class inputContainer
document.querySelectorAll('.inputContainer').forEach(container => {
//Bind a click event to each of those elements (parent)
container.addEventListener("click", function() {
//Turn on pointer-events (defaulted to off in CSS)
//and focus to prevent need to double click for focus
container.querySelector('input').style.pointerEvents = "auto";
container.querySelector('input').focus();
});
});

//Bind a blur event to all input fields to turn pointer-events back to "none"
document.querySelectorAll('input').forEach(input => {
input.addEventListener("blur", function() {
this.style.pointerEvents = "none";
});
});
<form>
<!-- Added container -->
<div class="inputContainer">
<input type="text" style="pointer-events:none;width: 300px; text-overflow: ellipsis" value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf" />
</div>
</form>

Detect if text-overflow:ellipsis is active on input field

If you want to know when the input text is too long and hidden ... there is no native support for checking thinks like this. You can hack it. You can make a tmp container with the same text, look the width of that container/text and compare it with the length of the input. If the tmp container is longer ... you have too long text and.

something like this:

function isEllipsisActive() {
return_val = false;
var text = $('input_selector').val();
var html = "<span id="tmpsmp">" + text + "</span>";
$(body).append(html);

if($('input_selector').width() < $('#tmpsmp').width()) {
return_val = true;
}

return return_val;
}


Related Topics



Leave a reply



Submit