How can i stripe or reduce character length if exceeds 10 characters (Using CSS & JavaScript)
I have the following display on desktop
<input value="0x388C818CA8B9251b393131C08a736A67ccB19297" />
How can i make characters to reduce some and put … in middle like this
in mobile and tablet view if character length exceeds 10 characters
<input value="0x388C818C ... 7ccB19297" />
pretty sure you’re going to need some Javascript there, unless CSS has developed something i’m unaware of.
am ok with JavaScript
just spitballing, not tested, but something like…
let element = document.getElementById("MyInputElement");
let truevalue = element.value;
if(window.innerWidth < somenumberhere) {
element.value = truevalue.substring(0,5) + "..." + truevalue.substring(truevalue.length - 5);
}
Hi @Craig20001x , you might use overflow: ellipsis here I guess. This will truncate the value and show three dots instead – just at the end though, not in the middle.
I’d be cautious with JS here. You’ll need to manipulate the input value for display, while ensuring the user can still edit the value as usual, which will be tricky to say the least (taking into account the cursor position etc.).
x-post
1 Like
i tried this, but not working
<!DOCTYPE html>
<html>
<head> </head>
<body>
<input id="MyInputElement" value="0x388C818CA8B9251b393131C08a736A67ccB19297" />
<script>
let element = document.getElementById("MyInputElement");
let truevalue = element.value;
if (window.innerWidth < 10) {
element.value = truevalue.substring(0, 5) + "..." + truevalue.substring(truevalue.length - 5);
}
</script>
</body>
</html>
The code would need to be adjusted to fit the demands, for sure.
If you need to edit the value, you’d have to add code for swapping of some form. (though i… dont know why someone would be manually editing a hex string like that? Maybe your example depends on copy/pasting)
If you dont care about how the shorthand is displayed, you can use the ellipsis on the end. Note that if you only want that behavior on mobile or tablet, you may have to couch it into a media query.
1 Like
With the new field-sizing css property you can make an input automatically the exact width of its content but set a max-width of 100% to allow it to scale smaller and show an ellipsis at the end.
Support is basically Chrome and Edge at the moment hence the fallback to a percentage width for other browsers.
3 Likes
is there a way to make it this way 0x388C818C ... 7ccB19297 instead 0x388C818C7ccB19297....
and supports all browsers
@PaulOB This would be the “unless CSS has developed something i’m unaware of” portion of my day 
Always good to learn about a new tool, even if its still experimental atm.
That’s why everyone who’s responded has stressed the “on the end” bit. An ellipsis goes on the end of a string, generally, so CSS puts it there because it doesnt know where to put it otherwise. You’d need to know things like… how much of the string does the user want on the front, on the back, etc.
So you’re probably back to a Javascript approach if you need it to be in the middle.
Does the field need to be editable?
Does it need to be a certain size? (You said ‘more than 10 characters’ but then show examples where it’s actually more than 17…)
1 Like
Does the field need to be editable? (Yes)
Does it need to be a certain size? (If characters are more than 10, then should be like this 0x388C818C ... 7ccB19297 if characters are less then 10 should remain 0x388C818CA8B9251b393131C08a736A67ccB19297 ) (This should work when the view is on mobile & tablet only)
So what if it’s only 11 characters.
Your example shows 19.
0x388C818C ... 7ccB19297
1234567890 123456789
so if my string is 11 characters:
0x388C818C7
how should I split this string?
this is the full example character before split
0x388C818CA8B9251b393131C08a736A67ccB19297
this is the splited character
0x388C818C ... 7ccB19297
how should I split this string?( I dont have string which is 11 characters, though even if its 11 atleast should be 0x388C818C…7)
So 10, then ellipsis, then either remainder or 9 characters, whichever is smaller.
Fair enough.
My brain immediately conjures 2 methods of doing this via javascript: value replacement or hidden field.
Value Replacement will require additional handling when you try to submit the fields.
1 Like
I prefer what I am seeing from PaulOB with a CSS approach, but just having a go at a JS version.
html
<form id='my-form' action=''>
<div class="input-group">
<label for='code-01'>Code 01</label>
<input id='code-01' class='clipped' type='text'>
</div>
<div class="input-group">
<label for='code-02'>Code 02</label>
<input id='code-02' class='clipped' type='text'>
</div>
</form>
javascript
// takes a string and if character length is over 12
// it substitutes the middle characters with an ellipsis ...
function clipText(text) {
if (text.length < 12) return text
return text.slice(0, 5) + '...' + text.slice(-5)
}
window.addEventListener('DOMContentLoaded', () => {
const mediaQueryList = window.matchMedia('(max-width: 600px)');
const clippedInputs = document.querySelectorAll('input.clipped');
mediaQueryList.addEventListener('change', (mql) => {
const isMobile = mql.matches
clippedInputs.forEach(elem => {
if (isMobile) {
// store actual value on a dataset property
elem.dataset.value = elem.value
// substitute input value with clipped text
elem.value = clipText(elem.value)
}
// if not mobile and there is a stored actual value different to the input value
else if (elem.dataset.value && elem.dataset.value !== elem.value) {
// retrieve actual value and display in input
elem.value = elem.dataset.value;
}
// just for logging
console.log(`${elem.id}: Actual value ${elem.dataset.value}`)
})
})
})
The issue with this approach is that on form submission you would need to pass the actual value held in the dataset value, rather than the input value.
Having the ellipsis at the end and using CSS I think makes for a cleaner solution.
3 Likes
There are pros and cons to each approach.
CSS:
Pro: Simple to code, almost[1] universal browser compliance. Also just plain cleaner.
Con: The ellpisis must go at the end; not helpful if the last-X of a value is important.
Javascript Value Replacement:
Pro: Keeps the cursor in the correct place when clicked on.
Con: Dealing with the form value (whether it be dataset or a variable) on submission.
Javascript Hidden Field:
(basically the opposite of VR)
Pro: No problems with submission [2].
Con: The cursor’s gonna go back to the start of the text box when you click.
2 Likes
Got a bit carried away trying to leave the input alone and shimming a data attribute on top.
A bit ‘magic numberish’ but works (although I still prefer the original css version).
2 Likes
this worked for me, but i came to notice some problem with it, its not working in safari browser
It is working in Safari but as I mentioned in my post field-sizing isn’t supported in Safari so the width of the input doesn’t change with content although the content does get truncated.
You could set a media query to set a smaller width at the same point as the JS truncation point.
e.g.
@media screen and (max-width:600px){
form input{width:150px}
}
1 Like
Nothing changes in safari
it remains the same
form {
display: flex;
flex-direction: column;
row-gap: .75rem;
padding: 1rem;
input {
padding: .25rem .5rem;
field-sizing: content;
width: auto;
min-width: 150px;
}
}
@media screen and (max-width:600px){
form input{width:200px}
}