Tips for wrapping text to fit the width of a column

Question

Tips for wrapping text to fit the width of a column

Hello, I have a table with varying column widths as shown below

${"#goldBarList"} table tr td:first-child{width:5%;}
${"#goldBarList"} table tr td:first-child+td{width:5%;}
${"#goldBarList"} table tr td:first-child+td+td{width:6%;}
${"#goldBarList"} table tr td:first-child+td+td+td{width:7%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td{width:7%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr:first-child{read-only:true; font-size:90%; font-weight:bold;}

I utilized the following CSS snippet:

${"#goldBarList"} table{
table-layout:fixed;
word-wrap:break-word;
}

to fix the table and wrap text in cells. However, the issue is that it does not wrap the text according to the column width. Even for 5% or 11% width columns, it wraps text wider than 8 characters. How can I achieve text wrapping based on column width?

javascript jquery css

Answer 1

Answer №1

To implement text wrapping in javascript, you can use the following function:

var wrapText = function(str, length){
    if(str == null || str == '') return '';
    return (str.length > length) ? (str.substr(0,length) + "...") : str;
}

You can call the function like this:

var name = "This is a very long text that needs to be wrapped";
$(selector).attr('title', name).html(wrapText(name, 10));

The title attribute of the element will display the default tooltip.

Answer 2

To implement text wrapping in javascript, you can use the following function:

var wrapText = function(str, length){
    if(str == null || str == '') return '';
    return (str.length > length) ? (str.substr(0,length) + "...") : str;
}

You can call the function like this:

var name = "This is a very long text that needs to be wrapped";
$(selector).attr('title', name).html(wrapText(name, 10));

The title attribute of the element will display the default tooltip.

Tips for wrapping text to fit the width of a column

Answer №1

Similar questions

Issue with Google Charts - Chart is unable to render because data table has not been defined

Create a loop in JavaScript to iterate through elements using both a while loop and the

Is HTML5 Device Orientation the answer to a dependable compass system?

What is the syntax for implementing conditional statements within the style jsx of Next.js?

Mac users may experience lag when using Javascript parallax effects

Using Nuxt and Cloudinary to seamlessly upload images from the client side directly to the Cloudinary platform

Utilizing jQuery ajax to make a request to a node.js server

What is the most efficient way to handle dependencies and instantiate objects just once in JavaScript?

Is it possible to link multiple references to a single Element/Node?

Incorrect Results from Angular Code Coverage

Having trouble choosing elements with angular.element within ng-repeat loop

Safari's problem with CSS transitions

What could be causing the undefined value of $routeParams?

Passing an array of items as a property to a child component in React with Typescript is not possible

When submitting an Asp net mvc Form, some fields may not be posted as expected

Looking for assistance in transferring information from one webpage to another dynamic webpage

Strategies for delaying the loading of CSS when importing

directive does not execute when the <Enter> key is pressed

Error: 'error' is undefined

What is the best method for showcasing various content using a uniform accordion style in React?