Column flexbox self is not functioning properly with text ellipsis

Is there a way to apply text-overflow: ellipsis to a flexbox element?

I know I need to set the width and overflow: hidden, but how can I achieve the ellipsis effect within the grey block when the text overflows?

Removing the flexbox property from the <a> tag allows the ellipsis to work, but I need to maintain the layout by adding an icon at the top using flex-direction: column. If I remove the display: flex, the layout breaks.

Any advice on how to overcome this issue?

div {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

span {
  display: flex;
  boder: 1px solid blue;
}

a {
  background: lightgrey;
  display: flex;
  /* Once I set the <a> as a flex, the-overflow: ellipsis doesn't work  */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 0 1 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100px;
}

a:before {
  content: 'icon';
  background: lightblue;
  height: 45px;
  width: 45px;
  margin-bottom: 8px;
}
<div>
  <span>
    <a>test123tfdsfsdafdsaffdsfdsafsadfest456</a>
  </span>
</div>
htmlcss

Answer №1

div {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

.wrapper {
  display: flex;
  border: 1px solid blue;
  text-align: center;
}

span.text:before {
  content: "\A";
  white-space: pre;
}

span.gr-bc {
  background: lightgray;
}

a {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 0 1 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100px;
}

a:before {
  content: 'icon';
  background: lightblue;
  height: 45px;
  width: 45px;
  margin-bottom: 8px;
}
<div>
  <span class="wrapper">
    <a>
      <span class="text">
        <span class="gr-bc">
          testing123example456
          </span>
  </span>
  </a>
  </span>
</div>

Answer №2

To achieve a combination of flex and ellipsis in CSS, you cannot apply them together in one class. It is recommended to use flex properties in the parent element and then implement ellipsis in the child element.

Here's an example:

<div class="parent">
    <div class="child">
      Example of long text which will truncate, 
      resize window to see the effect
    </div>
    <div class="button">
      Button
    </div>
</div>

.parent {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.child {
    overflow: hidden;
    padding: 7px;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button {
    padding: 7px 15px;
    background: #223748;
    color: #fff;
}

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

Tips for creating an input box that only accepts floating point numbers:

I have a custom component - a text box that I am using in two different places. In one location, it accepts integers and in another, floats. For the integer validation (where dataType=2), I have successfully implemented it. However, for the float validat ...

javascripthtmlangulartypescript

Leveraging moment.format Function in Angular within an HTML Context

Is there a way to implement the moment.format method in HTML? Currently, I am utilizing the toLocaleDateString method to showcase an array of dates: <ng-template let-event> <div>{{event.date.toLocaleDateString(' ...

htmlangulartypescriptdatemomentjs

Unable to view HTML without an internet connection

I have encountered an issue where my files work fine when uploaded to an online server, but do not work when accessed locally offline. An error message about a cross-origin issue appears. How can I solve this problem? Error message: Security Error: Conte ...

javascripthtml

Issue arises when combining inline-block and overflow-wrap for div elements

I am facing an issue with two divs that look good on the same line when utilizing display: inline-block. However, if one of the containers contains an excessively long word that I attempt to wrap using overflow-wrap and word-break, it causes the container ...

htmlcssoverflowinlineword-wrap

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

javascripthtmltwitter-bootstrapvue.jsnuxt.js

Including a logo and navigation bar in the header while collaborating with different subregions

I'm having trouble getting a picture to display in the header alongside a horizontal menu. I've divided the header into two sections: img and navbar (html). The navbar is showing up correctly, but the image isn't appearing. Any suggestions o ...

cssimageheader

Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV. My goal is to position the label in the top left corner of the div, partially overlapping it. Thank you <div class="span4" style="border-bottom: none; border-top: 4px s ...

htmlcsstwitter-bootstrap

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

javascriptjquerycssqtip2

What is the best way to manage two buttons within a single form?

<input type="submit" value="" id="button1"/> <input type="submit" value="" id="button2" /> In a single form, I have two buttons. Only one button appears at a time on the client side thanks to jQuery magic. The issue is that when using the &ap ...

jqueryhtmlformsbutton

jQuery can be used to relocate buttons on a webpage

When the Contact button is clicked, how can I move the Close button below #panel? It's currently fixed in position. Here's my demonstration: https://jsfiddle.net/25u78gff/ https://i.sstatic.net/qDad9.png jQuery('.sub-menu').addClass( ...

javascriptjqueryhtmlcss

Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks like this: <div class="row"> <div id="home-img" class="col-6"> ******An Image Goes He ...

htmlcssbootstrap-4flexbox

Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute? import React from 'react' import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; const theme = createMuiT ...

cssreactjsstylesmaterial-ui

Is there a way to fake a delayed reload when the webpage contains an audio element?

I have included an audio on my page which is causing it to load slowly. Below is the code snippet I am using: <div style="margin-left: 160px;"> <audio controls id="audio"> <source src="" type=&q ...

phphtmljquery

Hover over the hidden DIV

I have a div containing an image that is overlapping multiple other divs. It looks something like this: <div style='width:100%;height:100%'><img src='someImage.png'></div> <div id='covered'>I'm un ...

jquerycss

Achieve full width with flexbox column wrap while minimizing the height

How can I arrange elements in columns within a container with a fixed width and variable height, when the number of elements is unknown? My challenge is that I do not know the maximum width of the child elements, preventing me from setting specific column ...

cssflexbox

Is there a way to alter the background image of the logo specifically for mobile device viewing?

Here is a snippet of my HTML code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="{{ route('home') }}"> <img src="{{ asset('assets/images/logo-school-icon.png') }}" ...

cssmobilebootstrap-4

Ways to ensure a div matches the size of the div above it within a Boostrap grid column

Hello there, this is my very first question on this platform. I'm still in the early stages of learning all these concepts, so please be patient with me ...

htmlcssbootstrap-4

Converting Apache POI Word documents to clean HTML stripping out styles and superfluous tags

I am currently working on converting Word documents to clean HTML. I have been using Apache POI, but it seems to create messy output similar to MS Word's own HTML saving method. What I really need is a solution like the one offered by . For instance, ...

javahtmlcssms-wordapache-poi

Creating a gaming application with Phaser.js and Ionic with subpar rendering capabilities

Attention developers! I recently created a game app using Phaser.js. I integrated the code into an Ionic blank starter app, allowing the Ionic framework to render the view while Phaser takes care of displaying the game. Issue: The game is a simple flapp ...

javascripthtmlangularjsionic-frameworkphaser-framework

Ways to transition to the subsequent page in Selenium WebDriver following the click of the submit button

https://i.sstatic.net/QWcHm.jpg After successfully automating the process of filling in a textbox and clicking the "proceed with booking" button using a submit() command, I encountered an issue. The HTML code does not provide a URL that can be used in the ...

pythonhtmlcssseleniumwebdriver