Remove extra spaces in a string while ensuring the words do not break across multiple lines

In my sidebar, I need to limit the heading and description to two lines while keeping the span height consistent at two rows for vertical alignment. If a word doesn't fit in the space, it should be cut off and replaced with .... For example, instead of breaking into the next line, it should look like this this is my descirpti....

The word should simply be cut off and followed by ....

Is there a way to add a class to every div where the text is cut off? I want to style those cases differently!

I believe the solution lies in using the CSS property text-overflow

.max-width-200 {
  max-width: 900px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.heading-wrapper ,.description-wrapper {
  height: 50px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
   <div class="row max-width-200">
      <div class="col-3">
         <img src="https://picsum.photos/180">   
      </div>
      <div class="col-7 d-flex flex-wrap">
         <div class="col-12 no-padding align-self-start heading-wrapper">
            <span>This is my heading, its not very long</span>
         </div>
         <div class="col-12 no-padding align-self-center description-wrapper">
            <span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
         </div>
      </div>
   </div>
   <hr>
   <div class="row max-width-200">
      <div class="col-3">
         <img src="https://picsum.photos/180">   
      </div>
      <div class="col-7 d-flex flex-wrap">
         <div class="col-12 no-padding align-self-start heading-wrapper">
            <span>This is my heading, Its longer then it should be.. someone messed it up. Please fix me to be only two rows long!</span>
         </div>
         <div class="col-12 no-padding align-self-center description-wrapper">
            <span>This is my description. This description is longer than it should be. It should only be two rows large but unfortunately it's longer than two rows.</span>
         </div>
      </div>
   </div>
</div>

Answer №1

Below is a CSS code snippet that you can utilize:

  span {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
  }

It is important to note that when using text-overflow: ellipsis;, you may need to set the white-space attribute for it to function correctly. More information can be found here:

Before implementing this code, ensure to verify its compatibility with different browsers.

If you wish to avoid affecting the heading, consider changing the element from span to either p or an h tag.

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

Half screen layout using Bootstrap's grid system

Can you create two rows with four columns each, occupying 50% of the screen's height? Sample Bootstrap code for achieving this layout: <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col ...

Enveloping elements with jQuery

I am currently utilizing AJAX with jQuery to retrieve some HTML content, and here is the success function: function handleSuccess(response) { var searchTerm = $("#input").val(); // Convert string of HTML to object var anchors = $('<d ...

When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red. <div class="navigation-items"> <ul class="nav-list"> <li class="nav-item"><nuxt-link to="/en" ...

How do I utilize ng-if in Angular to apply to only the parent tag and not the following markup?

Suppose I have two HTML elements with the same tag but different properties. How can I conditionally select between them? Here are the two tags in question: <a ui-sref="root.one(::{param: value})"> <a target="_blank" href="{{::model}}"> I ne ...

Is it possible for JavaScript to capture scroll events while allowing clicks to pass through?

Currently, I have a setup where the user needs to interact with the layer behind the transparent scroll capture: http://jsbin.com/huxasup/4/edit?html,css,js,console,output scrollerCapture = document.querySelector('.scroller-capture'); scrollerC ...

Exploring and organizing data for customized lists in Ruby/ERB

I am looking to create a list layout similar to the one found here: This is the code I have so far: <div class="wrapper"> <ol> <% CraigslistZipCode.select("distinct region, fee").each do |record| %> <li><%= record.region ...

Variations in browser rendering of SVGs as CSS list-style-images

After creating a simple SVG of a red circle to serve as the list-style-image for my website, I discovered the concept in this Stack Overflow response: The solution worked seamlessly across all browsers except Internet Explorer. In IE, the SVG image render ...

Switching the keyboard language on the client side of programming languages

I'm interested in altering the keyboard language when an input element changes. Is it possible to modify the keyboard language using client-side programming languages? And specifically, can JavaScript be used to change the keyboard language? ...

Ways to incorporate an SVG file into an HTML canvas element while adjusting its dimensions on the fly

I'm struggling with implementing an SVG into my web-based game. I am attempting to draw the SVG, which has been encoded into a data URL, onto a canvas that should match the dimensions of the document window even when the window is resized. (functio ...

When testing Angular, an error occurred stating that "mat-chip-list" is an unknown element for Jasmine and Karma

Whenever I attempt to run tests using Jasmine and Karma, an error message keeps popping up: 'mat-chip-list' is not recognized: 1. To ensure that 'mat-chip-list' is a valid Angular component, double-check that it is included in this mod ...

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Do HTML elements that have the css property visibility:hidden still exist within the DOM tree? ...

Glitch in the animation of the slideshow

I'm encountering a small bug in the animation of my slideshow on the webpage and I can't seem to locate it. I followed a tutorial for the slideshow from this link: https://www.youtube.com/watch?v=TzAshjkhFQw. However, I only want to display 3 sli ...

jquery to create a fading effect for individual list items

I have a group of items listed, and I would like them to smoothly fade out while the next one fades in seamlessly. Below is the code I've been working on: document.ready(function(){ var list_slideshow = $("#site_slideshow_inner_text"); ...

Cannot adjust the chosen rage within the Material Date-Rangepicker

I'm trying to customize the colors of a material date range picker, but I can't seem to find the right class for the selected range. https://i.sstatic.net/P4Rys.png So far, I've managed to change the color of the selected range using the f ...

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

CSS: Ensuring consistent spacing between a custom popover and its control, regardless of container size modifications

I'm experimenting with creating a dynamic popover that adjusts its position based on whether it's viewed on a mobile device or desktop. Although I've made progress, the challenge lies in ensuring reusability. When resizing the container, th ...

Footer div is being covered by the page

I am currently working on a website built with "WordPress", and I have implemented a mobile footer plugin that is designed to only appear on mobile devices. However, I am encountering an issue where the page content overlaps the footer on phones. I attemp ...

SVG images suddenly disappearing in Chrome following a javascript script execution

My webpage has a sticky footer, but I am experiencing issues with SVG files not displaying in Chrome when the javascript for color changing on hover is enabled. Interestingly, disabling the javascript allows the images to load properly in Chrome. I have t ...

Nested Modals Result in Body Scrolling

https://jsfiddle.net/e6x4hq9h/ When opening the first modal, it works correctly and removes the background scrollbar. However, when trying to open a modal from within that modal, it causes the scroll to jump to the background. I have researched various ...

CSS that creates a repeated background image sourced from an 'image map'

I have created an image map with coordinates and dimensions specified (apologies for the rough drawing...) https://i.sstatic.net/CxQAk.png The numbers represent x-coordinate, y-coordinate, width, and height. For instance, 5, 5, 25, 25 indicates that the ...