Truncate text

Developer
Ben Babics
Size
2,028 Kb
Views
12,144
  1. Truncate text Previews
  2. Truncate text HTML Codes
  3. Truncate text CSS Codes

How do I make an truncate text?

This is sad having to do it this way.. What is a truncate text? How do you make a truncate text? This script and codes were developed by Ben Babics on 01 October 2022, Saturday.

Truncate text Previews
IQ Test

Truncate text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>truncate text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>normal text <span class="hidden">this should be hidden text</span> and no one should be able to see it.</p>
</body>
</html>

Truncate text - Script Codes CSS Codes

/* how it's done :( is there a better way? */
.hidden { display: inline-block; position: relative; overflow: hidden; padding-right: 10px; width: 0px; height: 10px; line-height: 10px; color: transparent; text-indent: -99999999px;
}
.hidden:after { position: absolute; top: 0; right: 0; text-indent: 0; content: "..."; color: #444;
}
/* how it should be done */
.truncate { width: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
Truncate text - Script Codes
Truncate text - Script Codes
Home Page Home
Developer Ben Babics
Username benbabics
Uploaded October 01, 2022
Rating 3
Size 2,028 Kb
Views 12,144
Do you need developer help for Truncate text?

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!

Ben Babics (benbabics) Script Codes
Name
A Pen by Ben Babics
Quikly Network UI Layout
Angular responsive table directive
LabNetwork Form Validation
AngularJS Multiple Directives Sharing Model
AngularJS Directive - Accordion
AngularJS extend Base Controller
Angular Directive Scope
Create amazing art & images with AI!

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!