Is it at all possible to hide the middle of overflown text instead of the end? Such as replacing the overflown text with periods.
I'm specifically talking about in a table now, but any possible way would be good to know.
So I mean shortening 112233445566778899 to 112...899 (or something similar) instead of 11223344
I don't know too much of JavaScript but if this is the only way let me know how and I'll figure out the rest with tutorials.
I've come up with a pure-JavaScript solution which combines Nick R's and alhoseany's answers together, whilst adding in a few extra bits of functionality to detect length and specify the number of characters required either side of the ellipsis.
With this method you do not need to know the number of characters that can fit in your container, it's all done automatically and can also be triggered when the window resizes.
Resize the result frame to see the results in action.
This:
...becomes this:
...or this:
...or this!
p {
border: 1px dashed #000;
position: relative;
display: block;
width: 50%;
}
p:before {
content:attr(data-shortened);
color: #000;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
function shortenContent(content, chars) {
/* chars here determines how many characters
* we want on either side of the elipsis. */
var chars = chars || 3; // Default is 3
if (!content && !content.length)
return;
/* Loop through each content element and
* shorten where necessary. */
for (i = 0; i < content.length; i++) {
var el = content[i],
elementWidth = el.offsetWidth,
textWidth = el.scrollWidth;
/* If our element's width is less than
* its content's width, we need to shorten. */
if (elementWidth < textWidth) {
var text = el.innerText;
/* Set the data attribute for the CSS to use. */
el.setAttribute(
'data-shortened', text.slice(0,chars) +'...'+ text.slice(-chars)
);
el.style.color = 'rgba(0, 0, 0, 0)';
}
/* Otherwise, ensure non-shortened text is visible. */
else {
el.setAttribute('data-shortened', '');
el.style.color = null;
}
}
}
To use the above function, you simply need to pass in a collection of elements into the shortenContent function:
// Get the content we wish to shorten
var content = document.querySelectorAll('div p');
/* Trigger the function initially. */
shortenContent(content);
abcdefghijklmnopqrstuvwxyz => abc...xyz
If you want a different number of characters to appear before and after the ellipsis (e.g. abcd...wxyz instead of abc...xyz), you can pass in a number as a second argument into the shortenContent function:
/* Trigger the function initially. */
shortenContent(content, 4);
abcdefghijklmnopqrstuvwxyz => abcd...wxyz
This will fire the shortenContent function whenever the window (the JSFiddle result pane, in this case) changes size.
/* Fire the shorten function when the window resizes. */
window.onresize = function(event) {
shortenContent(content);
};
Using Javascript, you could do something like this:
function shortenNum(num){
if(num.length > 6){
var first = num.slice(0, 3);
var last = num.slice(-3);
//console.log(first + "..." + last );
alert(first + "..." + last );
} else {
alert(num)
}
}
// should return 112...899
shortenNum("112233445566778899");
shortenNum("19999");
shortenNum("3536355");
It takes in a string, and grabs the first 3 characters and the last 3, then we can just concatenate them together, plus the ...
You could use substring as well instead of slice
edit: added a check for string length, anything over 6 characters should be shortened.
Here is a anonymously Javascript Example
This is the Js (Based on Nick R's Comment)
$('.shortable').each(function(index) {
//Get the Text
var text = $(this).text();
//Get the wanted Length
var wantedLength = $(this).data('length')
//Get the current Length
var currentLength = text.length
//If it should be shorten
if (wantedLength < currentLength) {
//Get Half Length
var halfLength = Math.round(wantedLength / 2)
//Get the Text Parts
var first = text.slice(0, halfLength);
var last = text.slice(0-halfLength);
//Change the Text
$(this).text(first + "..." + last);
}
});
This is the Html (Look at the Attributes):
<p class="shortable" data-length="20">Lorem ipsum dolor</p>
<p class="shortable" data-length="20">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
This is the Output:
Lorem ipsum dolor
Lorem ipsu... sit amet.
And this is your Fiddle:
And this is your additional Question
Is there a simple Js way of applying it on everything that would actually overflow and not on things that don't?
You can append the class shortable and the data-length Attribute to all those Elements.
For Example
<span class="shortable" data-length="20">Lorem Ipsum...</span>
<i class="shortable" data-length="20">Lorem Ipsum...</i>
<a class="shortable" data-length="20">Lorem Ipsum...</a>
With CSS, its not possible to clip or ellipse in mid text
Existing behavior
According to the description of text-overflow at Mozilla and the definition in the current W3C CSS UI module spec there's currently only the possibility to clip strings at the beginning and their end.
Only Possible Solution is from JavaScript, this thread would help you:
there is a ways to do this with html and css:
you can use the css pseudo elements with content property to replace the numbers with any attribute content like title or data-numbers.
example:
<div class="target" data-numbers="112...899" ><span>112233445566778899</span></div>
.target span{
display:none;
}
.target:before{
content:attr(data-numbers);
}
