When a text is lengthy, the ellipsis (three dots) will not be displayed

Question

When a text is lengthy, the ellipsis (three dots) will not be displayed

I have applied the following style:

div>span {
  display: flex;
  flex: 1 0 0;
  align-self: center;
  align-items: center;
  justify-content: flex-end;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Interestingly, the styling for ellipsis only seems to work with hidden and nowrap, but not with ellipsis. After researching, I found that it has something to do with the available width calculation, which is not clear to me how it can be helpful.

Evidently, the width of the content exceeds the container (hence being cut off). The closest working solution I found is by setting the display property to block instead of flex. However, I prefer using flex as it resolves many other issues.

I am struggling to find a way to maintain the flexibility offered by flex while making sure the text is ellipsized correctly. Is there a way to adjust this example to achieve this?

html css flexbox

Answer 1

Answer №1

The problem at hand arises from the utilization of display: flex on the <span> element where you intend to implement ellipsis. Though switching it to display: inline-block or block would resolve the issue, I acknowledge your preference for using flex with the span element.

My recommendation is to enclose the label within an additional <span> tag. Subsequently, apply the CSS for ellipsis to the recently nested inner span element (You can check out a live demonstration here.):

div>span {
  display: flex;
  flex: 1 1 0;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div>span>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
  <span><span>{{caption}}</span></span>
  <input type="text"
         placeholder="{{caption}}"
         [ngModel]="value">
</div>

Answer 2

The problem at hand arises from the utilization of display: flex on the <span> element where you intend to implement ellipsis. Though switching it to display: inline-block or block would resolve the issue, I acknowledge your preference for using flex with the span element.

My recommendation is to enclose the label within an additional <span> tag. Subsequently, apply the CSS for ellipsis to the recently nested inner span element (You can check out a live demonstration here.):

div>span {
  display: flex;
  flex: 1 1 0;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div>span>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
  <span><span>{{caption}}</span></span>
  <input type="text"
         placeholder="{{caption}}"
         [ngModel]="value">
</div>

Answer 3

Answer №2

If you want to utilize text-overflow: ellipsis; alongside flex-box, the only way to do so is illustrated in the following example:

div {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
}

div>span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et earum quo tenetur, neque facilis voluptates odio. Neque, facere totam sit!</span>
</div>

This method was sourced from a post on CSS-Tricks, which can be accessed here. It may not be the exact solution you were hoping for, but it could still prove useful.

Answer 4

If you want to utilize text-overflow: ellipsis; alongside flex-box, the only way to do so is illustrated in the following example:

div {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
}

div>span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et earum quo tenetur, neque facilis voluptates odio. Neque, facere totam sit!</span>
</div>

This method was sourced from a post on CSS-Tricks, which can be accessed here. It may not be the exact solution you were hoping for, but it could still prove useful.

Answer 5

Answer №3

Using both the properties display: flex and text-overflow: ellipsis on one element is not possible, but you can achieve a similar effect by following this example:

span {
  width: 100px;
  display: flex;
  min-width: 100px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<span>
This is a block-level element
</span>

Answer 6

Using both the properties display: flex and text-overflow: ellipsis on one element is not possible, but you can achieve a similar effect by following this example:

span {
  width: 100px;
  display: flex;
  min-width: 100px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<span>
This is a block-level element
</span>

When a text is lengthy, the ellipsis (three dots) will not be displayed

Answer №1

Answer №2

Answer №3

Similar questions

Obtain the Class Name Value by Utilizing the "Begins With" Selection Method

"Mastering the art of underlining individual components in React with the power of

The content entered into the text area does not appear as it was originally typed

Using JQuery to handle click events on an array of checkboxes and displaying the value of the selected

PHP is causing disruptions to HTML

Automatically scrolling a div to the bottom in a React component

SVG: organizing objects based on event priority

Ensure that the height of the content in JQuery Mobile is set to 100

Allowing the primary content to span the entire width of the mobile screen

Progressing through the Material UI LinearProgress bar in steps

When trying to insert glyphicons into a textarea, the result is displaying the actual text instead

Ways to ensure that when changes occur in one component, another component is also updated

Positioned in the middle is a collection of left-aligned divs

Create a dropdown menu option that changes based on the number of items that have been

Is there a way to utilize PHP/HTML to exhibit a diverse array of random images as dynamic background visuals?

Creating a grid with individual node delays in CSS animations using ReactJS

html - Bootstrap Navbar - Tips for aligning content on both sides

Ways to ensure the input placeholder remains visible as the user is typing

Creating Double Diagonal Borders and Corners in CSS

The styled-components in React are having trouble recognizing the HTML attribute 'autoplay' when used with a video tag