Playing with auto-truncation of text
How do I make an playing with auto-truncation of text?
What is a playing with auto-truncation of text? How do you make a playing with auto-truncation of text? This script and codes were developed by Tom on 16 September 2022, Friday.
Playing with auto-truncation of text - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with auto-truncation of text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <div class="tail"> tom rules</div> <div class="ellipsis">This is my text it is awesome</div>
</div>
<div class="box"> <div class="ellipsis">This is my text</div>
</div> <script src="js/index.js"></script>
</body>
</html>
Playing with auto-truncation of text - Script Codes CSS Codes
body { font-family: 'Proxima Nova'; font-size: 18px;
}
.box { width: 200px; outline: 1px dotted red;
}
.tail { float: right; content: attr(data-tail);
}
.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
Playing with auto-truncation of text - Script Codes JS Codes
var NUM_CHARS = 10;
var ellipsisDivs = document.querySelectorAll(".ellipsis");
for (var i = 0; i < ellipsisDivs.length; ++i){ var e = ellipsisDivs[i]; if (e.offsetWidth < e.scrollWidth){ var text = e.textContent; // e.dataset.tail = text.slice(text.length - NUM_CHARS); // e.style.paddingRight = (NUM_CHARS / 2) + 'em'; // FF only }
}
Developer | Tom |
Username | tomprogers |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 2,217 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Crawford - layout | 4,049 Kb |
Table styling | 3,298 Kb |
Layout for wordsearch tutorial | 2,726 Kb |
JQueryUI widemeter widget | 2,648 Kb |
Encoding | 3,245 Kb |
Progress bar | 1,974 Kb |
CSS3 glowing LEDs | 2,166 Kb |
Static doc search | 5,255 Kb |
RGB as resource value | 2,203 Kb |
Web component sandbox | 1,936 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Pink expansion tunnel | Vez | 1,738 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
404 Page | Saransh | 2,666 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!