Expanding divs in CSS for multiline versus single line text content

I am attempting to display text within a bordered div that is positioned absolutely inside another div.

Option 1 using width:auto; - view fiddle: https://jsfiddle.net/c21kt6r4/ The issue here is that the box on the left side expands excessively.

https://i.sstatic.net/etGvR.png

Option 2 - using width:min-content; - view fiddle: https://jsfiddle.net/ay159rw6/2/ The problem with this option is that the text in the right side box wraps around.

https://i.sstatic.net/vndAC.png

What is the best way to wrap text in a div and ensure the border displays correctly for both single and multi-line texts?

For the HTML reference:

<div class="main">
  <div class="item" style="left:0;">
      <label>SHAMPOO & CONDITIONER</label>
  </div>
  <div class="item" style="left:165px;">
      <label>WHAT EVER</label>
  </div>
</div>

And CSS:

.main{
 position:relative;
 border:solid black 1px;
 width:400px;
 height:400px; 
}
.item{
  border:solid blue 1px;
  width:160px;
  height:150px;
  position: absolute;
}
.item label{
  position:absolute;
  bottom:5%;
  left:5%;
  border:solid red 1px;
  padding:5px;
  display:inline-block;
  font-size:12px;
  width:min-content;
}

Answer №1

Follow these easy steps:

1) First, wrap the label inside a div and apply position:absolute. Be sure to use right:5% for spacing on both sides. This div will have a position relative so we can use the table cell property.

2) Next, add display: table-cell; to your label tag with the class .item label

3) Make sure to include word-break: break-all; in your label tag with the class .item label to allow words to take up the entire space

Check out the live demo here: https://jsfiddle.net/o5dgzn0c/

Take a look at the demo image for reference: Demo image.

We hope this guide proves helpful!

Answer №2

One suggestion is to use the max-width property in this scenario. It will set a maximum width for the item element while still allowing elements smaller than that to have a flexible width using width:auto. Here is an example:

.item label{
  position:absolute;
  bottom:5%;
  left:5%;
  border:solid red 1px;
  padding:5px;
  display:inline-block;
  font-size:12px;
  width:auto;
  max-width:100px;
}

Alternatively, using a JavaScript approach might be more suitable since the content's length is unknown.

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 process of making circle or square shapes with text inside using React, without the use of SVG images?

Is there a way to create circle and square shapes in React with custom text inside, without relying on SVG images? Check out this example: I attempted the code below but it did not render any shapes: import React from 'react'; export default fu ...

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...

Guide to pulling and showcasing information from XML at 30-second intervals using JQUERY AJAX and HTML

Seeking assistance as a beginner. Looking to retrieve and showcase data (HTML / PHP page) from XML every 30 seconds. XML FILE : <MAINData> <LiveData> <Field no="1">ENG ODI</Field> <Field no="2">ENG</Field> ...

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

Ways to invoke a function in HTML aside from using the (click)="function()" syntax

How can I display data from a GET request to the WordPress API as the page loads in an Ionic app using Angular? I am able to retrieve my desired post list, but only when I use a button click event to call the method in the HTML. Since this is my first att ...

Transform JSON data into a PDF file using NodeJS

When a GET request is made to: 'http://localhost:4000/features', the response contains JSON Data with embedded HTML. I am looking to extract and save the content of the "name" and "description" fields as a PDF. Here is a sample snippet: [{"_id ...

The issue of ngModel not binding to the value of ion-select in Angular Ionic

Having an ion select outside of a form with an ngModel attribute bound to "selectedValue", I encounter an issue where my selections are not being properly populated in the selectedValue variable even though they appear in the ionChange method. The main pur ...

What strategies can I implement to improve the efficiency of calling the PHP exec() function for pinging over 100 different hosts?

I have been experimenting with collages in an attempt to find a solution to the slow rendering issue I am facing with the results from my PHP function. The problem arises when I call the function multiple times for different hosts, causing significant dela ...

What steps can I take to troubleshoot the 'Uncaught DOMException: failed to execute add on DOMTokenList' error?

I am looking to create media icons <div class="contact"> <span> <i class="fa fa-phone"></i> </span> <span> <i class="fa fa-facebook"></i> </spa ...

Issue with content not properly aligning next to the vertical navigation bar

I've set my vertical navigation to be 10% width and my content to be 90%, but for some reason, I can't get them to align properly next to each other. I've experimented with float: left and display: inline-block, but so far nothing has worked ...

Is it necessary to have uniform spacing between links in a responsive navigation menu?

I am attempting to create a horizontal menu navigation system. I have multiple links in the navigation, and my goal is to evenly space them horizontally. Is there a way to achieve uniform spacing between links in a horizontal menu? HTML: <div id= ...

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

Is there a way to ensure that the border of a textarea matches the border of a text input?

My goal is to make the textarea fields in my form have the same appearance as the text input fields, regardless of the browser being used. I am interested in achieving this without imposing a customized style, but instead by leveraging the standard style w ...

Ways to have the "li" element displayed on a separate line

let selector = document.querySelector('.activate') selector.addEventListener('mouseover', function(){ document.querySelector('#hidden-li').classList.remove("hidden") }) selector.addEventListener('mouseleave', f ...

Tips for ensuring Marketo forms are responsive when integrated into a WordPress website

We are currently using Wordpress for our responsive website. Within the site, we have integrated Marketo forms (a marketing automation system) with custom CSS for styling. The issue we are facing is that while the forms appear fine on desktops, they cause ...

Retrieving text that has been HTML-escaped from a textarea using jQuery

Within my HTML file, I have a <textarea id="mytextarea"></textarea>. Suppose a user inputs the following text: <hello>, world! How can I retrieve res = "&lt;hello&gt;, world!"; based on the user's input? The current code s ...

When a table row is selected, set the OnClick attribute of an input to the value of the TD cell in that row based on

I'm really struggling with this. So, here's the issue - I have a table where rows get assigned a class (selected) when clicked on. Now, there's an input inside a form that needs to redirect to another page when clicked, and it also needs t ...

Passing label id as a parameter in ng-init in AngularJS

I am currently learning AngularJS and working on a project that involves fetching label names from a database. The challenge I am facing is how to pass a label id as a parameter and retrieve the corresponding label name. Ideally, I would like this process ...

What are the steps to create a dynamic background image that adjusts to various

When viewing the website on a computer screen, the entire cat is visible in the background image. However, when switching to a mobile screen size, only a portion of the cat is displayed, appearing as though it has been cut off. The image is not smaller on ...

Tips for updating the background color of a select option

I'm looking to customize the background color of select options in my Bootstrap 4 form. Can anyone provide guidance on how to achieve this? `` <div class="form-group "> <select class="form-control > <option va ...