Can you determine the width of a child element in HTML based on the width of its parent element?

i am dealing with

HTML and CSS files

<div>
    <p class="ellipsis"> Some text that is generated randomly</p>
  </div>

The CSS code in the LESS file is as follows: 

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

I want to ensure that the width of my paragraph does not exceed the width of its parent div. The parent div width is based on the browser window, meaning it can change constantly. Additionally, the randomly generated text can vary in length from 1 to 1000 characters.

htmlcssless

Answer №1

Are you looking for this solution? Check out the Fiddle

This approach demonstrates a responsive design.

CSS

.ellipsis {
    word-wrap: break-word;
    border: 1px solid black; /* This is included for visualization purposes */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
  • word-wrap: break-word; "is used to instruct the browser to break lines within words to prevent overflow when a long string cannot fit in its container." - Reference MDN article.

Try resizing the "result panel" in the fiddle to see how the text adjusts based on the parent's width.

Best regards, Leo!

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

What is the reason that a Button's text does not adhere to CSS style rules within the container that holds the button?

Imagine having this ASP.NET/CSS snippet: <div style="color:Red;"> some text...<asp:Button runat="server" ID = "Button1" Text = "ABC" /> </div> The "some text" section is displayed in red, however, the button's text remains bla ...

asp.netcss

What is causing my homepage to not redirect to a detailed view in Django?

Following a tutorial on codemy.com, I noticed that my "magic" disappeared around the time Django 5.0 rolled out. The tutorial was originally written for version 3.8 or 4.X. While the class-based view was recommended on the Codemy YouTube channel, I decided ...

pythonhtmldjangodjango-views

saving the JSON information for dropdown options within a variable

Greetings everyone I have successfully retrieved the options for my select tag in json format and used this code to populate the select tag: var mySelect = $('#'+select_id) $.each(response, function(key,val){ $('<option/>&apo ...

javascriptjqueryhtmlajaxjson

Is there a special technique to intensify the Linear Gradient color?

body{ background: -webkit-linear-gradient(to right, #ff6a00, #ee0979); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ff6a00, #ee0979); } /* The code snippet provided creates a linear gradient for the body background, I am lookin ...

csslinear-gradients

How can the onclick attribute be modified in an HTML document?

I am looking to update the data-pro-bar-percent attribute of a progress bar from 80 to 100 when a specific link is clicked. The change in attribute needs to be as follows: data-pro-bar-percent="80" --> data-pro-bar-percent="100" This is the current HT ...

javascriptjqueryhtml

place an icon on the left side of a tag in tailwind CSS while keeping text in the center

Is there a way to align an icon to the left side of a link while keeping the text centered at the same time? <div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8"> <Link href="#" className="px-6 py-3 mt-2 fle ...

htmlcssflexboxtailwind-css

Encountering spacing problems among elements in the Dropdown Menu

I'm currently experiencing an issue with the Drop-Down Navigation menu that I created using HTML and CSS. When I tried to add padding between the list of UL elements, I noticed that the padding was inconsistent across the elements. For example, the st ...

htmlcss

Creating a unique and personalized dual-row navigation bar using Bootstrap

Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the B ...

jqueryhtmlcsstwitter-bootstrap

Play button and directional indicators missing from Bootstrap video carousel

I'm facing an issue with my carousel that contains 4 videos, and I can't seem to figure out why. The problem is that I can only switch between videos by using the circles at the bottom of the screen; clicking on the left or right arrow buttons or ...

htmlbootstrap-4carousel

Alter the color of the text within the `<li>` element when it is clicked on

Here is a list of variables and functions: <ul id="list"> <li id="g_commondata" value="g_commondata.html"> <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : ...

javascripthtmlcss

Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images? Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for borde ...

htmlcss

steps to retrieve JSON object using Angular service

In the login.js file, I have a module with a method called loginUser structured like this: ...function loginUser(){ var user={ email:loginVM.Email, password:loginVM.pwd }; console.log(user); loginService.login ...

javascripthtmlangularjsjson

How can I implement a while loop for this animation using Javascript?

I've been delving into the world of JavaScript for a few days now, but I've hit a roadblock when it comes to implementing a while loop/switch statement in this animation project. The idea behind the program is that the image will "level up" and ...

javascriptjquerycsswidgetjquery-animate

Improved efficiency in CSS for left transition animations

Here is the current code I am using: .s2 { top: 150px; left: 20px; position: absolute; transition: left 300ms linear; } I am currently updating the left position dynamically using JavaScript based on scroll events. However, I have noticed that th ...

javascriptcssanimation

Swap the existing div with a fresh div using jQuery or JavaScript

Seeking a straightforward method to swap out a div with a different div, ensuring cross-browser compatibility with JavaScript or jQuery. Below is a code snippet to demonstrate. The goal is to replace "myDiv-B" with a new div: <div id="myDiv-C">{% in ...

javascriptjqueryhtml

Avoid placing the label within a form-inline in Bootstrap to maintain proper formatting and alignment

I am working on a form where I have two fields inline within a form-inline div. I am looking to move the labels of these fields above them rather than next to them. How can I achieve this without affecting the layout of the fields? Here is a CodePen link ...

htmlcssbootstrap-4

Colorful D3.js heatmap display

Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...

javascripthtmld3.js

What is the best method to ensure that my background image is fully visible on a webpage?

I'm attempting to place a background image at the center of my webpage, but unfortunately, the image extends beyond the page boundaries and is only partially visible. Below is my CSS code snippet: body{ background-image: url(../img/music_palace_ ...

htmlcssimage

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

Ways to prevent the datalist from appearing in the source code

Is there a way to hide a long list of words from appearing in the source code when viewing using PHP or HTML? Below is an example of the code I am working with: <label for="country_name">Country : </label><input id="country_name" name="cou ...

phphtml