Ellipsis not displaying correctly in a paragraph class with text overflow issue

I'm currently tackling a project that prioritizes mobile-first design. While I have a list of elements to work with, I've encountered an issue with one in particular. In this project, I want the "h3" element to always be fully visible for easy reading by customers. On the other hand, I'd like the "meal__description" to be cropped if it exceeds a certain length, ensuring that the price remains within its designated box without any unwanted shifts. Despite attempting to adjust the width of the element, it seems to be interfering with my hover effect. Thank you in advance for any assistance you can offer!

h3 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
  width: 100%;
}

.meal .meal__block {
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 0 10px #0000002e;
  margin-bottom: 2rem;
  height: 4rem;
  position: relative;
  padding-left: 0.8rem;
  padding-top: 1rem;
  animation: fadeIn 0.7s ease-in both, top 0.5s linear;
  cursor: pointer;
}

.meal__description {
  margin-top: 10px;
}

.meal__price {
  font-weight: bold;
  padding-right: 1rem;
  padding-top: 1.1rem;
}

.meal .meal__text h3,
.meal__description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal__description {
  font-size: 17px;
  width: 100%;
}
... (additional CSS code) ... 
<div class="meal">
     <section>
         ....
    The sample HTML code continues here...

htmlcss

Answer №1

By using the CSS property 'overflow: hidden;', your problem can be solved.</p>
<pre class="lang-css"><code>.meal__text {
   overflow: hidden;
}

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 resizing a tooltip using CSS

I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on th ...

javascripthtmlcss

How do I start using Google Analytics: application.js, ga.js, or a beginner’s guide?

Hello there! I was wondering if anyone could provide a comprehensive guide or step-by-step tutorial on setting up Google Analytics with some examples. The information I found so far only covers signing up and obtaining a tracking code, but it doesn't ...

javascriptphphtmlyiigoogle-analytics

Break apart PDFs into individual images or convert to HTML

I'm currently working on a project that requires the development of a unique webtool. The purpose of this tool is to allow users to effortlessly upload their PDF documents, which will then be displayed in a browser with an engaging page flip effect ut ...

phpjqueryhtmlpdf

Steps for importing a JavaScript file from Landkit into a Vue project

Currently, I am working on an interesting project and utilizing Vue with Landkit Bootstrap. However, I am encountering issues with the JavaScript behavior of the Landkit component. I usually import the following links in my index.html file, but in the new ...

javascripthtmlcssvue.jsbootstrap-4

Inspecting HTML elements with Capybara for class and ID attributes

Trying to locate an element and use Capybara for validation. There's a specific element that I want to check for using page.should have_css. <i class="ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter" aria-lab ...

cssrubyseleniumxpathcapybara

Guide for displaying information as a grid or table format using Angular 4

I am tasked with handling data from an external microservice that is not always in a standard format. The data is dynamic and can include table data, along with metadata information above the grid. My challenge is to render or identify the table data, disp ...

javascripthtmlnode.jsangularnpm

Not successfully integrating an angular component

In my Angular application, I am working on creating a new component and injecting it into the app. Below is the code for the angular component: (function(angular) { 'use strict'; angular.module('some.someModule', ['bm.component.t ...

javascripthtmlangularjs

Navigating through various div elements in Javascript and sending parameters to a script

Context In my project, I am using PHP to generate a series of voting sections. Each section follows the same format except for a unique number assigned to it, which increases with each iteration of the PHP loop. To keep track of the unique numbers, I uti ...

javascriptphphtml

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

htmlcssnode.jshttp

Utilizing PHP to send emails via an HTML form

I spent all day attempting to send an email from my HTML contact form using PHP, but I'm struggling as a beginner. When I uploaded the form to free web hosting, I received a "success!" message upon submission, yet no actual email was sent. Any assist ...

phphtmlformsemail

What is the best way to define the active <li> tab using JQuery?

Initially, my HTML code includes a set of <li> elements that I want to dynamically add to the existing <ul>. <ul class="tabs" id="modal_addquestion_ul"> <li class="tab-link current" data-tab="multipleChoice">Multiple Choice< ...

javascriptjqueryhtml

Altering the color scheme of a specific column within a stacked bar chart using C3.js

I'm currently facing a challenge with highlighting specific values in a c3.js stacked bar chart. While I was able to change the color of an individual bar in a non-stacked bar following this example, I'm struggling to determine how to identify th ...

javascriptcssc3.js

Create a grid div that expands vertically to completely fill the available space

I am encountering an issue with my grid layout involving the menu, header, and content. The problem lies in the fact that I want the content (blue box) to expand vertically within the grid element (yellow box). Currently, the grid stretches vertically, bu ...

htmlcsscss-grid

Animating drop-right feature in a horizontal navigation menu

I want to design a horizontal menu with an animated effect that activates when hovering over first-level items. Here is the code snippet: .nav { float: right; } .nav ul { list-style: none; padding: 0; margin: 0; } .nav ul li { position: relat ...

css

The fancybox's excess content is concealed

I've recently integrated fancybox 2 into my project and have encountered an issue when appending HTML content to the modal. I disabled scrolling, but now any overflowing content is being hidden. Could this be related to the max-height of the modal? Ho ...

javascriptjqueryhtmlcssfancybox-2

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Is there a way to trigger the animation in the SVG each time a next/prev button is clicked while navigating through a carousel where the same SVG is repeated multiple times? The carousel is built using PHP and a while loop. jQuery(document).ready(function ...

javascriptjquerycssanimationsvg

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

What is the best way to position two out of the three link tags to the right side?

This is the code snippet I am currently working with: <table> <tr> <td>&nbsp;</td> <td> <a id="btnAutoSuggest">Suggest Title</a> <a id="btnOK">OK</a> <a id ...

htmlcss

Mobile phone experiencing issues with background loop video playback

<video autoplay muted loop id="videobg"> <source src="bgvideo/bgvideo.mp4" type="video/mp4"> </video> I have a background video on my website that works perfectly on desktop but not on iPhone. You can c ...

htmlbootstrap-4

Assistance required for locating elements in Selenium using Css Selector

Hi there, I'm not really a developer. I've got two checkboxes in my table without any IDs. Usually, I can easily work with Selenium when elements have IDs, but in this case, the table was generated using jquery datatables and no automatic ID ass ...

c#cssgoogle-chromeseleniumselenium-webdriver