Issue with text-overflow in CSS not functioning properly on divs sized with percentages

I'm trying to set the width of my div in percentage, but for some reason the text-overflow property isn't working as expected.

Does anyone have suggestions on how to handle this?

div {
    width:50% /* instead giving 500px works!*/
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

htmlcss

Answer №1

Don't forget to add a semicolon after the width property in your CSS! Without it, the subsequent properties won't be applied either. Make sure each statement is terminated correctly.

div {
    width:50%;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin: auto;
}

Check out the demo here!

Answer №2

The primary issue here is the absence of a semicolon (;) after the width property. Due to this, the first two properties are being ignored. Without the ending semicolon, both properties are interpreted as a single property.

div {
     width:50%; /* instead of specifying 500px*/
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

Answer №3

The only issue here is the lack of a semi-colon, but an ellipsis will also work for percentages. Once you include the semi-colon in your code, everything should be fine.

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

Using Ant Design Table component: How to pass a string to the render method in the column attribute

I am currently utilizing Ant Design in my React project and I wish to incorporate a string into the render attribute for the column structure. Here is a sample code snippet. import React from 'react'; import ReactDOM from 'react-dom'; ...

javascripthtmlreactjsdomantd

Avoid displaying the image when encountering a 404 error, but sometimes a broken image may still appear momentarily

Here is the code snippet I'm currently using: <img ng-show="json.user.picture" ng-src="{{json.user.picture}}" ng-error="json.user.picture = false"> When accessing an image from an external website without permission, a 404 error code is return ...

javascripthtmlcssangularjssrc

My custom class is being ignored by Tailwind CSS within breakpoints

I'm attempting to incorporate some animation on the height property within the md breakpoint, but for some reason Tailwind CSS isn't applying my class. <div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? ...

cssreactjsnext.jstailwind-css

Choosing various items from the drop-down menu to display on the webpage

In my application, I have implemented a feature where data from an array is displayed in various panels. Users are given the option to remove panels from the view, with the removed panels then being populated in a dropdown menu. This allows users to select ...

javascriptjqueryhtmlangularjstwitter-bootstrap

What does the HTML and JS code look like when using Next.Js?

Here's an illustration of the desired result: codepen.io/j0be/pen/jWGVvV How can I implement this HTML and JS in Next.js? I am looking to customize this code using TypeScript and SCSS in Next.js. However, I am unsure about how to convert the HTML an ...

javascripthtmlreactjssassnext.js

Is it a not-so-great idea to use a combination of Bootstrap CSS and Custom CSS for styling

Is it considered bad practice to apply custom CSS on top of standard Bootstrap CSS for a button? Should I completely remove Bootstrap and use only custom CSS? If so, what is the trade-off in terms of performance? Another web developer mentioned that addit ...

htmlcsstwitter-bootstrap-3

Creating dynamic animations for your elements with AJAX

How can I apply animation to an element as soon as it appears? I want others with the same properties to remain unaffected. Here is my approach: $.each(data, function(i, obj) { if(obj['Ping'] == "FALSE"){ ...

javascripthtmlajax

How to ensure a div within an anchor tag occupies the full width in HTML and CSS?

In my code, I am working on creating multiple small boxes with images and centered text inside. The goal is to have these boxes clickable, where clicking the image will take you to a specific link. On desktop, I want a hover effect that darkens the image b ...

javascriptjqueryhtmlcss

What is the best way to retrieve the default selected value in JavaScript and send it to PHP when the page is loaded?

Currently, I am facing an issue where I can only display the value as an output after manually selecting a Grade from the dropdown list on the page. However, I am looking to have the default selected Grade value displayed as an output when the page is init ...

javascriptphphtml

What is the best way to transfer data from a Java array to a JavaScript array?

<% //Fetching the list of servers from the dispatcher Collection<Server> serverList = (Collection<Server>)request.getAttribute("data"); ArrayList<String> serverIdsList = new ArrayList<String>(); ...

javajavascripthtml

Achieve equal height for two v-flex sections placed side by side in Vuetify framework

desired appearance: https://i.sstatic.net/aPrrP.png current appearance: https://i.sstatic.net/JNH2W.png In an attempt to ensure two tables have a consistent and responsive height using Vuetify features, I have implemented the following code: <templa ...

htmlcssvue.jsfrontendvuetify.js

Struggling to properly position a checkbox within an Angular Material project

<div class="checkbox-password"> <div> <mat-checkbox class="example-margin">Remember me</mat-checkbox> </div> <div> <a routerLink="/forgotPassword" class="createAccount" ...

cssangularflexboxangular-materialdisplay

Is there any method to determine whether a floated element has been pushed down?

Imagine a dynamic menu with floating elements, each set at a width of 150px. As the menu's width decreases, the elements progressively move to the next row. You are contemplating how to detect when an element has been moved down. One approach could b ...

javascripthtmlcsscss-float

After inserting a new checkbox input, Chrome fails to automatically populate the fields with autofill

I have a login form on my website which includes fields for both email address and password. So far, all the browsers I've tested have been able to autofill these fields successfully. Recently, I decided to add a checkbox input to the form. However, ...

htmlgoogle-chrome

Adding a div beside an input element - step by step guide

When creating an input field in my code, I followed these steps: var inputVal = document.createElement("input"); inputVal.setAttribute("type", "checkbox"); inputChek.onchange = select; inputChek.setAttribute("value", title); //inputChek.after(sortDiv); ...

javascripthtmlcss

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...

javascripthtmlajax

Improving Modal Closure on Form Submission Suggestions

Seeking Assistance with Modal Closure After Form Submission I understand that this inquiry may have been posed by someone else before, but I require guidance specifically for my code pertaining to handling form submission with AJAX. As a newcomer to AJAX, ...

phphtmljqueryajax

What is the best way to interact with a button in a HTML file using Selenium?

<div class="dropdown-div u-space-ls u-inline-block" data- reactid=".0.0.0.3.1"><a class="dropdown-div__button js-dropdown button" href="#" data-reactid=".0.0.0.3.1.0"><span class="u-pad-rs" data- reactid=".0.0.0.3.1.0.0">ACTIONS</sp ...

javahtmlselenium

expanding a div to cover the entire width

Recently, I encountered an issue with a div element positioned at the beginning of a block. To center it on the page, I utilized flexbox and successfully achieved the desired result. My CSS code to center the div: .elementor-element-acf3e44{ display: fl ...

htmlcssflexbox

Add all elements except for the last one

<div id="container"> <div class="sub">a</div> <span id="add">add</span> </div> $('#add').click(function(){ $('#container').append('<div class="sub">a</div>&ap ...

javascriptjqueryhtml