Tips for designing a unique CSS ellipse effect for text styling

Hey there! I have a list of titles in a drop-down menu as strings, for example: 

"Bharat Untitled offer #564", "Bharat Untitled offer #563"

The titles are quite long, so we want to display the first eight characters, followed by '...' and then the last 4 characters of each title.

To achieve this, I've applied the following CSS rules:

.title{
    max-width: 100px;
    min-width: 100px;
    overflow: hidden;
    text-overflow:ellipsis;
}

With these rules, we get an output like:

Bharat Unt...

However, I'm looking for an output like:

Bharat Untitled...ffer

Do you have any ideas on how to achieve this format? Let me know!

javascriptcss

Answer №1

Give this a shot:

let beginningChar = 10;
let endingChar = 7;
let sampleString = "I have a long list of words in a dropdown menu";
let output = "";
if (sampleString.length > (beginningChar + endingChar)) {
  output = sampleString.substring(0, beginningChar) + '..' + sampleString.substring((sampleString.length - endingChar), sampleString.length);
}
alert(output);

Answer №2

If you're looking to accomplish this task using JavaScript or jQuery, there are several possible methods to achieve it. Allow me to demonstrate one method here.

function shortenName(str) {
    return str.substr(0, 8) + "..." + str.substr(str.length - 5);
}

Now all you have to do is pass each value to this function. I trust you know how to do that. Best of luck!

Answer №3

https://jsfiddle.net/8ye6df9p/

Check out this neat creation I made with a monospace font. Hopefully, it will bring some wisdom your way.

span {
  font-family: "Lucida Console", Monaco, monospace;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6em;
  font-size: 1em;
}
<span>dog eatsdodddddddddgsdfghjkghersdddgsdfghjkghersdddgsdfghjkghersdddgsdfghjkgherstyfghurefyghujrttgyhujrttgyhjretghrtgh</span>

<span>dogfgggyfg ff tgyhujrttgyhjretghrtgh</span>

<span>dog </span>

<span>brainatgs200 </span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The 'classProperties' React component module is currently not enabled

Encountering an error while running my react module 'classProperties' isn't currently enabled (44:11): } 43 | // componentDidUpdate or try this > 44 | onClick = (e) => { | ^ 45 | e.preventDefault(); 4 ...

javascriptreactjsexpressnpmbabeljs

Ways to combine and run the outcomes of several functions with Lodash

Imagine you have two distinct functions (or more) that take one argument from an executor and return the result object. Let's illustrate this with an example: const style_1 = theme => ({ header : { color : theme.primary } }) const sty ...

javascriptlodashmaterial-uijss

Issue with multiple dropdowns not functioning in Bootstrap 5

Before you criticize my imports, here are the scripts I am using: <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script ...

htmlcsstwitter-bootstrapbootstrap-5

Using axios to render data in a view template

I am currently working on developing a basic Single Page Application (SPA) with the help of vue.js and axioz for scripts, without using CLI or any other tools. At this point, I have succeeded in fetching data from a JSON file, rendering and paginating the ...

javascriptjsonvue.jsaxios

Every time I click the highlight button, my navbar link inexplicably shrinks

I am struggling with adjusting the list style in my bootstrap navbar. Whenever I click on the highlight button, it squeezes my navbar and I'm not sure how to fix it. <div id="links"> <a href="index.html">Home& ...

htmlcssheaderbootstrap-5

Improving an unspecified JavaScript function

After taking inspiration from another website, I incorporated this code snippet into my project, only to find that it's not functioning properly. What could be the issue? var LessonsCustomControl = (function LessonsCustomControl_constructor(){ va ...

javascriptjquery

Node.js encounters a conflict between route names and directory names

Can you use the same name for both a route and a directory in a Node.js project? For example: require("./test")(router); And inside the test.js file: app.get("/test", function(req, res) {}); Also, test is a directory in the same project. When attempti ...

javascriptnode.js

Using a function to send multiple child data in Firebase

I am trying to figure out how to save data to a Firebase multi-child node structure: --Events ----Races -------Participants Below is some dummy data example that represents the type of data I need to store in Firebase: var dummyData = [ { ...

javascriptangularjsfirebaseangularfire

I am looking for a way to access an array from Node.js using JavaScript and EJS. How can I achieve this

Currently, I am developing an app that requires passing an array from the server to the client. Initially, I attempted the following: // Server app.get('/', (req,res) => { res.render('index', { data: ["Hello"] }) }) ...

javascriptnode.jsexpressejs

Transforming color images into black and white using JavaScript

     I have implemented this code to convert colored images to grayscale. function applyGrayscaleEffect() {         var imageData = contextSrc.getImageData(0, 0, width, height);         var data = imageData.data;         var p1 = 0.99;   ...

javascripthtmlcssslider

What could be causing the error message "setShowModal is undefined" to appear in my React project?

Here is the code snippet I am working on: import React, { useState } from "react"; import Modal from "./Modal"; function displayModal() { setShowModal(true); } export default function NewPostComponent() { const [showModal, setShowMod ...

javascriptreactjsreact-hooks

Uncovering a particular property within an array with the help of EJS

I am still learning about ejs and javascript. I have an ejs file where I want to display a list of array objects with unique properties. My goal is to iterate through the array's length, check if a specific property matches a string, and then display ...

javascriptnode.jsexpressejsnodemon

The jQuery mouseout functionality seems to be malfunctioning and not responding as expected

I am currently developing a slider that displays details when the mouse hovers over the logo, and hides the details when the mouse moves away from the parent div. jQuery('.st_inner img').mouseover(function() { jQuery(this).parent().siblings( ...

javascriptjquerywordpress

Exploring the Depths of Web Scraping: A Guide to Scraping Within a Scraped Website

I have successfully scraped data from a specific page, but now I need to follow another href link in order to gather more information for that particular item. The problem is, I am unsure of how to do this. Here is an excerpt of what I have accomplished s ...

javascriptnode.jsweb-scrapingcheerio

Does writing JavaScript code that is easier to understand make it run slower?

While browsing the web, I stumbled upon this neat JavaScript program (found on Khan Academy) created by another user: /*vars*/ frameRate(0); var Sz=100; var particles=1000; scale(400/Sz); var points=[[floor(Sz/2),floor(Sz/2),false]]; for(var i=0;i<part ...

javascriptperformanceoop

Create a recursive CSS style for an angular template and its container

I am struggling with styling CSS inside an ng-container that is used in a tree recursive call to display a tree hierarchy. <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list" [selected]="isSelected"> <sp ...

cssangularrecursiontree

Encountering an issue with TS / yarn where an exported const object cannot be utilized in a consuming

I am currently working on a private project using TypeScript and Yarn. In this project, I have developed a package that is meant to be utilized by one or more other applications. However, as I started to work on the consumer application, I encountered an ...

javascripttypescriptpackageyarnpkg-v2tsup

Updating style of an element by hovering over another

What is the best way to change the CSS of one element when hovering over another element in CSS? We can achieve this using the following code: .example .example2 li:hover .element If our HTML looks like this: <div class='example'><di ...

htmlcsscss-selectors

1. "Customizing Navbar height and implementing hover color for links"2. "Tips for

Having issues adjusting the height of my Navbar - when I try to do so, the collapse button doesn't function properly. I've attempted setting the height using style="height: 60px;" and .navbar {height: 60px;} but the collapse menu stops ...

htmlcss

Expanding circle with CSS borders on all edges

My goal is to create a background reveal effect using JavaScript by increasing the percentage. The effect should start from the center and expand outwards in all directions. Issue: The percentage increase currently affects only the bottom and not the top ...

javascriptjqueryhtmlcss