What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

Question

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help!

https://i.stack.imgur.com/8iLBQ.png

In my scenario, I need to display a list of items separated by commas to the user. If the list is too long for the input field, I want to show something like item1, item2,... +5 more. To accomplish this, I require a method to identify which text is displayed and which is hidden behind the ellipsis.

html jquery css web

Answer 1

Answer №1

You have the option to include a title attribute for the text. This will display the original text when the user hovers over it. I have provided examples using the input and p elements.

.ellipse {
text-overflow:ellipsis;
width:70px;
overflow:hidden;
white-space:nowrap;
}

<p class="ellipse" title="This is the very big text">This is the very big text</p>

<input class="ellipse" title="This is the very big text" value="This is the very big text" />

UPDATE

If you have a new requirement that involves using JS/JQuery to achieve the desired outcome. The process may involve obtaining usernames in your scenario, which could be stored in an array. You may not need to utilize CSS ellipsis properties since that is not the intended solution. Refer to the following example code snippet for guidance:

var items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6'];

var originalValue = "";
var displayedValue = "";

for(i=0; i<items.length; i++) {
 originalValue += (items.length - 1 == i) ? items[i] : items[i]+ ", ";
}
tmp = items.length - 2;
if(items.length > 2) {
  displayedValue = items[0] + ", " + items[1] + ", ... +" + tmp + "more";
 }
 document.getElementById("user").value = displayedValue;
 document.getElementById("user").title = originalValue;

.ellipse {
  width:140px;
}

<input id="user" class="ellipse" title="" value="" />

Answer 2

You have the option to include a title attribute for the text. This will display the original text when the user hovers over it. I have provided examples using the input and p elements.

.ellipse {
text-overflow:ellipsis;
width:70px;
overflow:hidden;
white-space:nowrap;
}

<p class="ellipse" title="This is the very big text">This is the very big text</p>

<input class="ellipse" title="This is the very big text" value="This is the very big text" />

UPDATE

If you have a new requirement that involves using JS/JQuery to achieve the desired outcome. The process may involve obtaining usernames in your scenario, which could be stored in an array. You may not need to utilize CSS ellipsis properties since that is not the intended solution. Refer to the following example code snippet for guidance:

var items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6'];

var originalValue = "";
var displayedValue = "";

for(i=0; i<items.length; i++) {
 originalValue += (items.length - 1 == i) ? items[i] : items[i]+ ", ";
}
tmp = items.length - 2;
if(items.length > 2) {
  displayedValue = items[0] + ", " + items[1] + ", ... +" + tmp + "more";
 }
 document.getElementById("user").value = displayedValue;
 document.getElementById("user").title = originalValue;

.ellipse {
  width:140px;
}

<input id="user" class="ellipse" title="" value="" />

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

Answer №1

Similar questions

What's the ideal file structure for Codeigniter paired with Angularjs?

A guide to setting up a Python CGI web server on a Windows operating system

Nested divs with independent scrolling capabilities

What is the best way to personalize the icon for this navigation button?

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

What are the methods for accessing data from a local Json file on an html page without using a server?

The DateTimePicker does not properly update the value field when onChange or onSelect is triggered

My custom CSS being overridden by Bootstrap styles

Having trouble getting the jQuery function to update text properly

Angular 7 - Customize Mat-select-value color depending on a specific condition

What is the method to store and retrieve data attributes linked to elements such as select options within the React framework?

Encountered issue with Ajax post request without any additional details provided

Tips for keeping several buttons in the spotlight: HTML/CSS/JS

A guide on uploading a photo to an existing mySQL database using a form

`Nginx with a touch of material design`

The Issue with Non-Functional Links in Nivo Slider

Saving users' dark mode preference on my website

"Exploring the best way to loop through multiple JSON data in a jQuery response

Safari and Chrome are directing Angular Http Post requests to different URLs

Utilize ng-repeat to display a series of images, with the first image being placed within a unique div