Text that has been shortened to fit within a flexible container width

I am looking to create a two-column list with variable width on the left and fixed width on the right. The text on the left column should be truncated based on the window size:

+----------------------+-----------+
|Variable width text...|Fixed width|
+----------------------+-----------+

I have searched for examples on how to truncate text in HTML/CSS, but they all use fixed width which doesn't suit my variable-width requirement. This results in the left column text not being truncated properly, causing the element to be wider than needed.

I have tried multiple approaches, but none seem to work correctly, making it challenging to provide a sample code. This task is specifically for a WebView in a desktop application, so compatibility with the latest version of WebKit is all that is required.

htmlcss

Answer №1

If you are looking to truncate text, you can achieve this by using a technique such as the following: http://jsfiddle.net/fju9q/2/

This method involves utilizing 2 separate div elements. The right div is floated, while the left div makes use of CSS properties like overflow: hidden and white-space: nowrap; to ensure that the text is truncated.

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

How to center a span using Twitter Bootstrap

As a newcomer to Twitter Bootstrap, I'm wondering how I can center a span within a parent row. Currently, I am working with Twitter Bootstrap Version 2.3 instead of 3.1. In version 3.1, there is a center-block feature that I cannot utilize in 2.3. Th ...

csstwitter-bootstrapresponsive-designcss-frameworks

Dynamic background featuring a tall vertical image

I have an image that is extremely long, measuring 2263 x 8192 pixels. I want to design a website with a background that spans the width of the window and the full height of the image, all while maintaining responsiveness. The concept is to have this elong ...

jqueryhtmlcssimage

Is it possible to transmit identical data from a form to two distinct actions in Symfony5?

UNIQUE LOGIN TEMPLATE {% extends 'base.html.twig' %} {% block title %}Welcome to the Login Page!{% endblock %} {% block body %} {% if error %} <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div& ...

phphtmlsymfonytwigsymfony5.4

Implement a click event listener to the existing button function

How can I ensure that the function below only fires when the element with id #submit is clicked? I added a back button, but after clicking it, the code below executes unexpectedly. I need to add a condition to ensure that the code below only runs when #sub ...

javascriptjqueryhtml

Having difficulty including the Column Name in the Jqgrid footer for sum calculation

I was working on the Jqgrid code and found a way to display the sum correctly in the footer of the grid. var colSum = $("#dataGrid").jqGrid('getCol', 'Amount', false, 'sum'); $("#dataGrid").jqGrid('footerData', &a ...

javascriptjqueryhtmljqgrid

Toggle the disable state of a button depending on a specific condition

I have a scenario where I am fetching data from a server, and I need to apply a filter to a specific column. The requirement is that if the "bought" column (boolean) has a value of true, then the edit button should be disabled; otherwise, it should be enab ...

htmlangularhtml-tableangular10

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

No matter what I do, the CDN for Bootstrap 4 just won't cooperate with Windows 7. Oddly enough, it works perfectly fine on Windows 8. Here is the CDN link that I'm using: <!doctype html> <html lang="en> <head> <!-- Req ...

javascriptjquerycssbootstrap-4windows-7

Ensure all division elements have the same height by utilizing a directive

My webpage currently displays a grid that is not properly arranged. However, when I executed the code below in the console, the grid was formatted correctly: var maxHeight = Math.max.apply(null, $("#activityfeeddetails").find(".course_thumb_outer").map(fu ...

javascriptjqueryhtmlcssangularjs

How can I show only the final four digits of an input field using Angular Material and AngularJS?

As a newcomer to Angular Material and Angular JS, I am striving to create an md-input field that displays only the last 4 digits in a masked format, such as "********1234". While my experience is currently limited to using md-input password fields where ...

javascripthtmlcssangularjsangular-material

The surprising margins that Bootstrap sneaks into columns

It seems like bootstrap is mysteriously including an unseen margin in my column classes. Even after inspecting an element labeled as 'col-lg-3,' there is no visible margin CSS, and attempting to manually add margin:0 still results in a margin bei ...

twitter-bootstrapcssmarginbootstrap-4

Using the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

javascripthtmlarraysstring

Discover internal hyperlink using user input and generate a click event for the anchor

Is there a way to use jQuery to locate internal links on a page based on user input and trigger a click event on the anchor tag? ...

jqueryhtmlhashinputdictionary

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

javascriptcssvue.jsvuejs2

Is it necessary to have uniform spacing between links in a responsive navigation menu?

I am attempting to create a horizontal menu navigation system. I have multiple links in the navigation, and my goal is to evenly space them horizontally. Is there a way to achieve uniform spacing between links in a horizontal menu? HTML: <div id= ...

htmlcssresponsive-designnavigation

Looking to create a form that automatically updates the second dropdown list when I make a selection in the main dropdown menu

<div> <label for="form-field-select-3">State : </label> <br /> <select class="chosen-select form-control" id="State" n ...

phpajaxhtmlcodeigniter

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

javascriptjqueryhtmlcssblogger

Personalize the width of the columns

My SharePoint Online HTML code is as follows: <div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Responsable" ctxnum="14" displayname="Responsable" fieldtype="User" ...

jqueryhtmlcss

Display a popover when the button is clicked using jQuery

Is there a way to show a notification message using popover? I've managed to make it work, but I'm facing an issue where the popover doesn't appear on the first click of a button after the page loads. Here is the code snippet: <button ty ...

jqueryhtmltwitter-bootstrappopover

What is the best way to incorporate a confirmation model prior to accessing a dynamically generated link within a Jinja2 template?

I need assistance with deleting a record from an HTML table created within a Jinja2 template. I want to implement a confirmation prompt before proceeding with the deletion process. My development environment includes Bootstrap5. The current functionality ...

htmljinja2crudbootstrap-5

In the Firebug console, Ajax posts are highlighted in a vibrant red color

Upon executing the code provided, the Firebug was enabled. While submitting the form, in the console, the message "post to login_submit.php" appeared in red. However, there was no response received as well. <!DOCTYPE html> <html> ...

javascriptphpjqueryhtmlajax