Apologies for not providing any evidence of my own efforts.
I'm looking to wrap text in a table cell, but limit it to just 2 lines.
Expanding the width is not possible. Any suggestions on how to achieve this?
Apologies for not providing any evidence of my own efforts.
I'm looking to wrap text in a table cell, but limit it to just 2 lines.
Expanding the width is not possible. Any suggestions on how to achieve this?
Table cells put in a lot of effort to showcase all the content you insert into them. They follow their width and height properties as general guidelines rather than strict limitations. If you need more space to display content, simply let them expand.
To address this, place a <div> within the table cell with specified width and height, along with overflow:hidden. This way, the table cell won't unnecessarily grow, maintaining its size, ensuring that text stays within the defined boundaries of the div.
It's guaranteed to be effective
<div style="width:100px; padding:10px; height:50px; overflow:hidden;">
Enter your content here .... Enter your content here .... Enter your content here ....
</div>
A big thank you
For those looking to display only two lines and hide the rest, it is important to specify certain CSS properties for the cell,
.your_class {
line-height: 16px;
height: 32px;
width: 100px; /* Customize according to your needs */
overflow: hidden;
word-break: break-word; /* Helps in breaking longer text */
word-break: break-all;
display: block;
}
To see this code in action, you can visit http://jsfiddle.net/WLcC4/
It is necessary to specify the
dimension
and
hide overflow
for each table cell
If you're looking to add truncation with ellipsis, a great option is using trunk8. However, if you prefer no ellipsis, simply apply overflow: hidden and specify the height attribute.
To ensure a specific width for the table and td, remember to add custom CSS styles.
For the table, use this style:
table-layout: fixed;
For the td elements that need to be fitted, apply these CSS properties:
overflow: hidden;
white-space: nowrap;
If you wish to display ellipses for overflow text:
text-overflow: ellipsis;
Check out this demonstration on JSFiddle: http://jsfiddle.net/h4fqm/
function calculateTaxAndTotalRent(rent) { var phoneCharges = parseFloat($('#phone_charges').val()); phoneCharges = phoneCharges.toFixed(2); rent = parseFloat(rent); rent = rent.toFixed(2); var tax = parseFloat((rent * 15) / 1 ...
I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...
I created a contact form using Nodemailer that I am having trouble with. Take a look at the code below: let mailOptions = { from: '<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3636360e363636602d2123">[emai ...
Is there a way to use jquery or xpath to target an element with less than n children? For example: <div id="1" class="parent"> <div class="child></div> <div class="child></div> </div> <div id="2" class="parent"& ...
In my HTML (within a Twig template), there is the following code snippet: <li id="{{folder.id}}" data-jstree='{"icon":"glyphicon glyphicon-tags", "type":"folder"}' ><a href="#">{{folder.name}}</a> I'm attempting to extrac ...
I have a question about incorporating user input text into CSS styling. Specifically, I am looking to create a color background option (#ffffff) where the designer can input their own color and have it displayed once saved in the body background style. Wh ...
I have developed a custom lightbox that features the smooth transition of images when users click on next/previous buttons. However, my current challenge lies in animating the width and height of the lightbox before the image actually appears. $('im ...
Currently working on a game website and stuck at the registration stage. We are looking to allow players to input a code in their Ingame notes for verification purposes. I have created a PHP class to retrieve the ingame notes, but now I need to set a java ...
In the interest of simplicity, let's assume that my fixed height is 100px. So, the CSS expression for the question in the title would be: height: min(min-content, 100px); This means to take the minimum value between content height and 100px. Unfortun ...
I am currently utilizing the combination of Zend Framework and jQuery. My issue involves calling a JavaScript function that sends POST data to a PHP script and then waits for a response. Everything was functioning correctly earlier today on my Debian sys ...
I'm facing a challenge with an iframe positioned in the center of a webpage. I want to show content from another page within the iframe, but not starting at the very top. To achieve this, I inserted an anchor into the src of my iframe, linked to an a ...
Help! I keep getting an error message: DataTable Uncaught TypeError: Cannot read property 'style' of undefined Does anyone have any ideas on how to fix this? I keep seeing the following error message: Uncaught Typ ...
As a newcomer to jQuery, I am trying to understand the distinction between response and response.d. Currently, I am utilizing response.d for failure alerts. I am curious to know what message would be displayed in the alert box if there is a failure (alert ...
I am baffled by the fact that margin-left is only affecting certain elements and causing frustration. .setting-container { position: relative; top: 60px; left: 0px; width: 100%; height: calc(100% - 60px); } .setting-topnav { width: 100%; h ...
I'm currently working with a Material UI grid system that appears as shown below: <> <Typography gutterBottom variant='h6'> Add New User{' '} </Typography> <Grid container spacing={3} ...
As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right c ...
One of my HTML elements has a parent with the ID #out, and a child with the ID #in. The parent is positioned absolutely, with a minimum height of 100%. It seems to be functioning correctly in most browsers, except when I also set the child's min-heigh ...
After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...
Is there a different method to center content with empty space on either side? For instance: <div class="col-md-3"></div> <div class="col-md-6"> <div class="form-group"> .... </div> </div> <div class="col ...
Here is the concept I was referring to, you can see it in action by following this link <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-bo ...