Unforeseen truncation issues within a table causing ellipsis to appear unexpectedly

I'm facing an issue with truncating text inside a table, and it's not working as expected. Can someone help me understand what I might be doing wrong?

Edit: I need to ensure that the table width remains max-width: 100%;

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-56 overflow-x-hidden">
  <div class="table max-w-full border-spacing-y-5 border border-red-200">
    <div class="table-row"> 
      <div class="table-cell whitespace-nowrap pr-5 border border-blue-200">
        This
      </div>
      <div class="table-cell pr-5 border border-green-200">
        is 
      </div>
      <div class="table-cell pr-5 border border-orange-200">
        the
      </div>
      <div class="table-cell border border-purple-200 overflow-y-hidden">
        <div class="flex">
          <span class="truncate">text to truncate</span>
        </div>
      </div>
    </div>
  </div>
</div>

<p>Expected Results:</p>

<div class="flex w-36">
  <span class="truncate">This is the text to truncate</span>
</div>

htmlcsstailwind-css

Answer №1

If you need help understanding the issues involved, take a look at this insightful answer. Besides this one, there are other answers to the same question that might shed light on your concerns. Now, let's convert my vanilla CSS into Tailwind.

.my-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-table {
  width: 100%;
  table-layout: fixed;
}
<script src="https://cdn.tailwindcss.com"></script>

<div class="w-56 overflow-x-hidden">
  <div class="table max-w-full border-spacing-y-5 border border-red-200 my-table">
    <div class="table-row"> 
      <div class="table-cell whitespace-nowrap pr-5 border border-blue-200">
        This
      </div>
      <div class="table-cell pr-5 border border-green-200">
        is 
      </div>
      <div class="table-cell pr-5 border border-orange-200">
        the
      </div>
      <div class="table-cell border border-purple-200 overflow-y-hidden my-truncate">
          text to truncate
      </div>
    </div>
  </div>
</div>

<p>Expected Results:</p>

<div class="flex w-36">
  <span class="my-truncate">This is the text to truncate</span>
</div>

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

Issue with Error in Expanding Label in Material-Ui using React

I have managed to increase the size of the Label in the TextField component of my React application. However, I am encountering an issue where it overlaps some text on its right when it shrinks. https://i.sstatic.net/BikHJ.png Here is the link for refere ...

cssreactjsmaterial-uijss

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

javascriptcssreactjsmaterial-ui

Issue with Material-UI's DataGrid scrollbar not displaying on the screen

I have a DataGrid set up with at least 20 rows. My goal is to limit its height and allow users to navigate through the remaining rows using the scroll bar within the component. However, I'm facing an issue as the scrollbar for the DataGrid itself is n ...

cssreactjsmaterial-ui

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

I've developed a scroll-to-top feature for my Angular project, but I'm facing an issue. The scroll icon appears immediately upon page load instead of only showing after the user scrolls down. Any ideas or suggestions on how to achieve this? Here ...

htmlcssangulartypescriptscroll

I need to see the image named tree.png

Could someone assist me in identifying the issue with this code that only displays the same image, tree.png, three times? var bankImages = ["troyano", "backup", "tree"]; jQuery.each( bankImages, function( i, val ) { $('#imagesCon ...

javascriptjquerycsshtml

What is the reasoning behind the repetitive use of @media (max-width: 767px) in the Twitter Bootstrap

Why is the media query @media (max-width: 767px) repeated in the bootstrap-responsive.css file? To find out, you can view the file by visiting ...

csstwitter-bootstrap

Activate a monitoring pixel with a click of your mouse

I have a tracking pixel that is typically placed in the body of a "installation success" page: <img src="http://domain.com/adclick.php" width="1" height="1" border="0" /> However, I want to trigger this pixel when someone clicks on a download butto ...

phpjavascripthtml

Dynamic status bar for WordPress using Advanced Custom Fields

I am currently working on developing an order tracking system using Wordpress, ACF, and a form plugin that is yet to be determined for the user interface. While the back-end functionality is working smoothly, my focus now shifts towards creating a visual ...

csswordpressadvanced-custom-fieldsacfpro

What's preventing me from invoking this object's function through an inline anchor?

CSS: <div class="box"> <p>This is a box</p> </div> Javascript: var box = { content : (function() {return ("This is the content of the box")}) }; alert("Box content: \n" + box.content()); $("output").text( +"<br/ ...

javascripthtmlcssjsfiddle

Utilize Xpath to transition between different html tags seamlessly

Here is the HTML snippet I am working with: <pre> <span class="cm-string">"userId"</span> ":" <span class="cm-string">"abc"</span> "," </pre> My goal is to extract the text "abc" from the "userId" tag, which changes fr ...

javahtmlseleniumxpathselenium-webdriver

Trouble encountered when attempting to override styles in Material UI's TableRow

I am attempting to customize Material UI's default styles in order to create a margin between each TableRow. Despite my efforts, it appears that the override is not being reflected in the user interface. ...

javascriptcssreactjsbootstrap-4material-ui

What is the best method for extracting specific information from an HTML webpage?

I am currently working on a project to create an MP3 song fetcher using WPF. The goal is to retrieve all the results from a webpage. However, I'm encountering issues where irrelevant data such as tags and non-downloadable links are being fetched. My ...

c#htmlwpf

What is the reason this :class="{}" is not functioning properly in Vue.js?

I have created a simple file that contains a reactive Array of objects where each object has a property called "checked" which is a boolean that toggles based on a checkbox. I am using a v-for directive to iterate through the array of employees and render ...

javascriptcssvue.jsfrontendvuejs3

Tips for retrieving specific database entries using a JavaScript function

I'm currently in the process of developing a web directory that showcases organizations based on the selected county by utilizing an XML database. During testing, I have configured it to only display organization names and counties for now. However, ...

javascripthtmlxmlxpath

HTML makes column text wrapping automatic

Is it feasible to implement text wrapping into two columns or more in HTML using solely CSS? I have a series of continuous text enclosed within p tags only, structured as follows: <div id="needtowrap"> <p>Lorem ipsum dolor sit amet, ...&l ...

htmlcsstext

How can the checkers code be corrected due to a mistake?

Designed a simple game where the objective is to clear all the pieces by jumping over the checkers. However, encountering an error when attempting to remove the checker for the second time. Uncaught TypeError: Cannot read property 'theRow' of u ...

javascripthtmlhtml5-canvas

Can the current website navigation be integrated into the blog script?

People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

cssheadernavigationblogs

Attempting to remove an attribute or property in JavaScript will not yield the desired result

When I try to close the menu after opening it, the inline style won't get removed despite trying different methods. The CSS only has text properties for alignment and the class can-transform contains a media query. That's all the information I h ...

javascriptcssfunctiontoggleinline-styles

Develop a custom Dockerfile for hosting a Python HTTP server in order to showcase an HTML file

I have a folder containing a single HTML file (named index.html) with basic text. When I execute the python command: python -m SimpleHTTPServer 7000 a server is initiated at port 7000 in the same directory to display the page in a web browser. Now, I am ...

htmlpython-2.7dockerdockerfile

When I attempted to use jQuery to access the innerHTML of list items, I encountered the issue of it returning as Undefined

For my grocery list application created with Angular 4, I need the user to click on an item and have it added to the bookmarked section. Despite using jQuery to access the innerHTML of the li when hovered over, the value keeps returning as "undefined." In ...

javascriptjqueryhtmlangular