Text overflow within a flexible container that adjusts its size automatically

Utilizing FlexBox for my application, I am looking to truncate text in .text using flex-grow: 1

CodePen

Jade layout:

  main
    aside
    content
      section Hello
      footer
        .panel
          .avatar
          .text
            div Truncating long text with FlexBox. Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at
          .actions
            .act
            .act
            .act
htmlcsspugflexbox

Answer №1

To extract a portion of a string in JADE, you can utilize regular JavaScript and begin the line with -. For instance, 

- var myVar = 'contains a string'.slice(0,5)

If you need to modify your JADE code, you can do so as shown below, check out the PEN example here

.panel
  .avatar
  .text
  - var divContent = 'Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at'
  div.notTruncated= divContent 
  - var divContentTruncated = divContent.slice(0,180)
  div.truncated= divContentTruncated + '...'

CSS-Solution

Ensure your text is enclosed within a block or an inline-block element for the CSS to work properly. Using an inline element may require adjustments to its behavior through CSS. For more information on CSS nowrap and ellipses, refer to this page.

Below is the CSS styling for the element, view the changes in the updated PEN here

.truncatedText {
  text-overflow: ellipsis;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  display:inline-block;   
}

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

Having trouble getting my initial Vue.js code to function properly alongside basic HTML

I am in need of assistance with this code as it does not seem to be working properly. I am using an external js file named app.js for the Vue JS code in the index.html file. Here is the code from index.html: new vue({ el: '#app', data: { ...

javascripthtmlvue.js

Tab panels are shown by Bootstrap 5 tabs

I am using Bootstrap 5 to design a layout that changes based on the width of the screen. When the screen width is greater than or equal to 992 pixels, a table is displayed in the sidebar and some text is shown in the main content area. However, if the scre ...

htmlcsstwitter-bootstrapbootstrap-5

Exploring the differences between translate3d and matrix in CSS 3 animations

Lately, my projects have demanded seamless transitions and animations. We've made the shift from using Javascript to CSS animations almost entirely. I've discovered that utilizing translate3d produces incredibly smooth animations on various devi ...

csscss-animationscss-transformstranslate3d

Issues arising from the event target

What is the reason behind this code functioning successfully only when the alert function is called? The color changes after closing the alert box, but if the line with the alert command is commented out, nothing happens. function setLinkColor(el) ...

javascriptjquerycss

The CSS arrow breadcrumbs appear slightly fuzzy when viewed in Firefox

My arrow breadcrumbs are appearing a bit fuzzy in Firefox, but they look crisp in Chrome, Opera, and IE. Check out the CODEPEN Here is how it appears in Firefox: https://i.sstatic.net/9iX0g.png This is my HTML: <div class="row"> <div class=" ...

htmlcsstwitter-bootstrapfirefoxbreadcrumbs

Personalized dropdown appearance

During my work on a select box, I discovered that custom styling is not possible. I attempted to use some plugins but did not find one that met my needs. I am seeking a dropdown menu with options in both black and gray, similar to this template but using ...

javascriptjqueryhtmlcss

Utilize Jquery to toggle a class on and off with a click event

I am currently working on a functionality where I want to remove the class on and add the class off when clicking on a div. However, when I click on the div again, I expect the class on to be added back and the class off to be removed. Unfortunately, thi ...

jqueryhtml

Differences in layout design when using floats and display: table between Chrome and Firefox can affect the visual appearance

Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/ Here's the HTML code: <body> <main> <div> <div style=" height: 50px; width: 200px; ...

htmlcssgoogle-chromefirefox

The grid image is refusing to fall into formation

I have been attempting to align the image in section-1 to the right side, but for some reason, it's not cooperating. I initially tried using flex-box, but I want the image to remain fixed on the right side of the screen without any movement. Floats ca ...

htmlcss

Is there a way to preserve text content prior to activating the text-overflow feature with

Is there a way to extract the last sentence or word, or even the entire text displayed before the ellipsis in a container with limited height where the content is inside a p-tag with a long content using text ellipsis and overflow? .grid-container > ...

cssstringtextoverflowellipsis

"Within Angular 2+, the attribute referenced is not recognized as a valid property, even though it is explicitly defined within the @Input

The main goal here is to increase the vertical pixel count. <spacer [height]="200"></spacer> Initially facing an issue where an error message states that height is not a recognized attribute of spacer. To address this problem, I set up the fo ...

javascripthtmlcssangularproperties

Toggling Selected Items with Jquery Show/Hide Feature

Is there a way to toggle the visibility of selected items in the mobile menu? For instance, when I click on the menu toggle, I would like all the items in the Div class sidebar to be displayed but any content within its child div with class="sticky" shoul ...

javascriptjqueryhtmlcsstoggle

Choosing a language - Sending dropdown selection from HTML5 to PHP

Is there a way to store the selected language from an HTML5 dropdown menu into a variable for later use in PHP? Currently, I have hardcoded the initial value of the variable in the code itself. I want to pass the selected language dynamically from HTML t ...

javascriptphpajaxhtml

setting today's date as the default value in a jQuery Mobile form

I am in the process of developing an app with jQuery Mobile that focuses on capturing memories. The app includes a form for users to input new memories and save them. One of the fields in the form is the date of the event. I want this date field to be edit ...

jqueryhtmldefault-valuejquery-mobile

Is there a way to conceal the contents of a page until all the images have finished loading?

I'm currently working on improving the performance of a website that is loading very slowly. I have already reorganized, compressed and minified the JavaScript and CSS files, but the main issue seems to be with the images. The site contains large imag ...

javascripthtml

Creating an interactive Table of Contents in Sharepoint using only JavaScript

Imagine you have a massive Sharepoint wiki page filled with various heading tags like H1, H2, H3, and H4 - now picture creating a dynamic Table of Contents using these tags. The goal is to categorize these tags by group and utilize the HTML <detail> ...

javascripthtmlfor-loopsharepointtableofcontents

Transfer the selected dropdown values from JSP to Servlet by sending all the <td> columns for each row

There is a table located in a JSP page that is enclosed within a form tag. The table consists of 3 columns and each row contains a dropdown menu for selection. The issue arises when modifying the dropdown selection and clicking on the button under the for ...

javascriptjqueryhtmljspservlets

The navigation located at the top rather than in the header

I want the navigation in my HTML file to be visible at the top so that users can scroll up to see the header. Do you understand what I'm trying to achieve? I will provide visual examples with 2 images. PS: I prefer not to use hashtags as they are al ...

javascripthtmlcss

Retrieve content from the pushState state object

$(function(){ $('button').click(function(e){ e.preventDefault(); var nextUrl = 'page1.html'; var previousUrl = window.location.href; $.get(nextUrl, function(data){ $('body').ht ...

javascriptjqueryhtml

What is the best way to ensure an inline HTML style takes precedence over a CSS style?

I'm trying to pass a value into an Angular Material Table in order to set the row color to black. However, it seems like my CSS stylesheet keeps overriding this setting which is meant to make the rows gray. I thought inline styling should take precede ...

htmlcssangular