What is preventing the text below from being condensed into an ellipsis?

Here is the code snippet:

<div class="grid w-full gap-4 grid-cols-8">
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg><span class="overflow-hidden text-ellipsis text-center text-xs">sssssssssssssss</span></div>
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg><span class="overflow-hidden text-ellipsis text-center text-xs">dummy.mib</span></div>
</div>

The content is overflowing from the container instead of being collapsed. Any ideas on why this is happening and how it can be fixed?

Tailwind Play Link

htmlcsstailwind-css

Answer №1

The text is breaking out of the container

This issue occurs because the word sssssss... is continuous and does not break at default positions. To resolve this in Tailwind, you can utilize the break-all class to force breaks at any point.

If your intention is to implement text overflow ellipsis, Tailwind provides the line-clamp-* classes for achieving this effect directly.

<div class="grid w-full grid-cols-8 gap-4">
  <div class="max-w-small flex w-full cursor-not-allowed flex-col items-center justify-center gap-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path></svg
    ><span class="line-clamp-2 break-all text-center text-xs">ssssssssssssssssssssssssssssssssssssssssssssssssssssss</span>
  </div>
  <div class="max-w-small flex w-full cursor-not-allowed flex-col items-center justify-center gap-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path></svg
    ><span class="line-clamp-2 break-all text-center text-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, praesentium.</span>
  </div>
</div>

View Demo on Tailwind Play.

Answer №2

give this code a try

<div class="grid w-full gap-4 grid-cols-8">
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed" style="width: 100px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="overflow-hidden text-ellipsis text-center text-xs" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">sssssssssssssss</span>
  </div>
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed" style="width: 100px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="overflow-hidden text-ellipsis text-center text-xs" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">dummy.mib</span>
  </div>
</div>

Answer №3

One simple adjustment I made was modifying the overflow property in the main container.

<div class="grid w-full gap-4 grid-cols-8">
  <div class="flex w-full flex-col gap-1 justify-center overflow-hidden items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="text-ellipsis text-center text-xs">Updated content here</span>
  </div>
  <div class="flex w-full flex-col gap-1 justify-center overflow-hidden items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg><span class="text-ellipsis text-center text-xs">Additional content goes here</span></div>
</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

I must arrange each item in a column vertically, regardless of whether they could align horizontally

As the title suggests, I am looking for a way to stack one element under another, similar to a chat application. Currently, when the message is long, it displays correctly, but if the text fits next to each other, it aligns in that manner. I require a solu ...

cssvue.js

displaying html depending on certain conditions

My goal is to display different HTML text based on the if conditions in my component.ts file. Here is a snippet of my HTML code: <div class="login"> <div *ngIf="emailStatus == EmailStatus.verified"> <h1>You ...

htmlnode.jsangular

Modify the contents of a textbox by editing the text as you type

Text within the text box follows this format: login -u username -p password When entering this text, I want to substitute 'password' with a series of '*'s equal in length. For example: 'login -u <a href="/cdn-cgi/l/email-prot ...

javascriptjqueryhtmlangularjs

expanding the input and duplicating the outcomes

I'm attempting to clone and add values to results in my project. Here's the link to what I have so far: http://jsfiddle.net/QNP3r/175/ Currently, it is functioning adequately with a table element. However, I'd like to make it work with a di ...

javascriptjqueryhtmlappend

Font Awesome icons are preventing the navigation bar from collapsing

Just getting started with Bootstrap and facing an issue. I want to include a collapsed user icon that expands when clicked. However, when I add the navbar-toggle class, the icon disappears completely. Without it, the icon appears but doesn't collapse ...

htmlcssbootstrap-4

Tips for maintaining visibility of the selected option within a dropdown menu

When I choose one item from a dropdown list of 3, the selected item is still visible in the dropdown along with the other two. I would like all three items to be displayed even if one is selected. reference dropdown Based on the reference image, even thou ...

cssreactjsdropdownreact-selectreact-async

Chrome clipping positioned spans

Having trouble positioning a label above inline sections with spans in Chrome, as the labels are getting clipped oddly. Check out these screenshots: Firefox view: Chrome view: In the Chrome screenshot, you can see that the labels are being cut off based ...

htmlcssgoogle-chromewebkit

Strangely shaped border appears when interacting with editable div block

I am attempting to build a textarea that has the capability to display multiple colors. To achieve this, I created a div and used the following JavaScript code: element.unselectable = 'off'; element.contentEditable = true; Now, the div can be e ...

javascriptcsscontenteditable

Unable to extract all elements using simple HTML dom when parsing RSS feed

I've been attempting to extract various details like titles, descriptions, links, images, and dates from an RSS feed located at . However, for some reason, I am unable to retrieve the link tag and image source within the feed. The rest of the data ext ...

phphtmlrss

It appears that Wordpress is having trouble accurately mapping POST data

Let me explain the issue I am facing: I have a .php file embedded in my WordPress site that performs the following tasks: It contains a form that prompts the user to enter their NAME. Upon submitting the form, the data is posted to the same page (action ...

phphtmlwordpress

Having trouble with the :first-of-type Pseudo Class in CSS?

I have been attempting to style the first link in an li element with a specific font color. When the li element is clicked, it gains the "open" class. I've tried using both li a:first-of-type and li a:first-child pseudo-classes to achieve this, but ...

htmlcss

Using jQuery to access specific elements within the DOM by navigating through the document structure

I'm currently facing a challenge with using jquery's parents/siblings functions to locate specific input elements. Despite my efforts, I can't seem to get it right. Here is the HTML structure I am working with: <div id="ExtrasOptions"&g ...

jqueryhtmlparent-child

IE10 is having trouble rendering HTML, while IE7 displays it correctly

I am experiencing an issue with IE10 where it is not rendering HTML perfectly in an iframe, even though it works fine in IE7. In IE10, it appears that the margin is not being applied to paragraphs and lists. I am using iframes to embed HTML from other fil ...

htmlcssinternet-explorer

Seeing the Bootstrap css load immediately upon the page loading and switching between pages

Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transition ...

htmljquerycssbootstrap-5

Currently, I am encountering a problem as I attempt to iterate through a dynamic table

I have a table containing various elements. An example row is Jack Smith with multiple rows like this: col1 col2 col3 col4 col5 col6 col7 col8 jack smith 23 Y Y error error_code error_desc The table is ...

javascripthtml

What is the method for shortening the sizable text "Hereisthelargetextbreakwithphp" to "Hereisthelarge..." using PHP?

Modify the large text "Hereisthelargetextbreakwithphp" to "Hereisthelarge..." $string = "Hereisthelargetextbreakwithphp"; $string = strip_tags($string); if (strlen($string) > 21) { $stringCut = substr($string, 0, 21); echo $string = substr($str ...

phphtmlcodeigniter

.value not being grabbed from options of selected index

I have a form that includes a select field with the id of "to". My goal is to retrieve the selected value within a JavaScript function. Interestingly, the first time I execute this function, it fails to capture the selected value. However, upon running t ...

javascripthtml

Is there a method or API available for interacting with an <object> that is currently displaying a video?

Yay, I figured it out! I've been using video.js to play videos on a website that needs to work offline too. Unfortunately, using flash is not an option due to compatibility issues. So, I decided to write my own fallback solution. For Internet Explor ...

javascripthtmlinternet-explorervideo

Ways to arrange objects to fill up space in a specific sequence

My HTML document contains two child HTML elements within the parent HTML. The parent HTML has a div with a class of .page, which is a large area for the children to occupy. Both children are of the same size and I need them to spawn in a specific order; fo ...

htmlcssangularcss-grid

What sets XHTML 1.1 apart from other document types?

Visit this page for more information: XHTML 1.1 makes it simple to create various display formats, including printing pages, wireless device and PDA pages, and browser pages for television by creating a new CSS (cascading style sheet) for the specific ...

htmlxhtmldoctypehtml4xhtml-1.1