A trio of versatile sections within a box, one designed to accommodate text overflow

Question

A trio of versatile sections within a box, one designed to accommodate text overflow

Trying to create a CSS layout where three texts are placed side by side without wrapping, but once the first text is too long, it needs to be truncated. Check out the image below for more details.

Methods I have attempted so far:

Floated positioning of texts in a row
Flexbox for positioning texts in a row
Using display: table-cell to position texts in a row

Unfortunately, when the first text exceeds the container's width, issues arise. Either the container or the child text becomes larger than intended, or the other two texts end up being cut off or hidden.

Any ideas on achieving a flexible layout as shown below? Both Case 1 (or any alternative) and Case 2 should work without knowing the width of the text.

html css

Answer 1

Answer №1

Here is the code snippet:

 <div class="container">
     <div class="box1">
         Short
     </div>
     <div class="box2">
         LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
     </div>
     <div class="box3">
         Short
     </div>
 </div>

 <style>
 .container{
     margin:10px;
     width: 400px;
     background-color:grey;
 }

 .container div {
     overflow:hidden;
 }

 .box1 {
     text-overflow: ellipsis;
     background-color:green;
     min-width: 20%;
     float:left;
     max-width: 60%;
     display: inline-block;
 }

 .box2 {
     background-color:red;
     width: 20%;
     display: inline-block;
 }

 .box3 {
     float:right;
     background-color:yellow;
     width: 20%;
     display: inline-block;
 }
 </style>

You can view the result here: http://jsfiddle.net/ramsesoriginal/utSgC/

The use of percentage-based widths allows for easy adjustments by setting the parent's width.

The third box in the example demonstrates how the layout adapts to longer content in the second and third boxes.

Answer 2

Here is the code snippet:

 <div class="container">
     <div class="box1">
         Short
     </div>
     <div class="box2">
         LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
     </div>
     <div class="box3">
         Short
     </div>
 </div>

 <style>
 .container{
     margin:10px;
     width: 400px;
     background-color:grey;
 }

 .container div {
     overflow:hidden;
 }

 .box1 {
     text-overflow: ellipsis;
     background-color:green;
     min-width: 20%;
     float:left;
     max-width: 60%;
     display: inline-block;
 }

 .box2 {
     background-color:red;
     width: 20%;
     display: inline-block;
 }

 .box3 {
     float:right;
     background-color:yellow;
     width: 20%;
     display: inline-block;
 }
 </style>

You can view the result here: http://jsfiddle.net/ramsesoriginal/utSgC/

The use of percentage-based widths allows for easy adjustments by setting the parent's width.

The third box in the example demonstrates how the layout adapts to longer content in the second and third boxes.

A trio of versatile sections within a box, one designed to accommodate text overflow

Answer №1

Similar questions

Calculator built with HTML, CSS, and JavaScript

Fill a dropdown menu with options from a JSON object, arranging them in ascending order

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

What is the process for utilizing Sass in Vue CLI rather than node-sass (which is the default for sass-loader)?

The bootstrap navigation bar appears in a vertical orientation rather than the expected horizontal

Exploring Checkboxes in Hypertext Markup Language

How to align the last item in the bottom row using Flexbox styling

The incorrect indentation issue occurs when the text wraps around

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

Basic form submission versus using an Ajax loader mechanism

Stop the execution of the setTimeout function when the webpage loads in JavaScript

Tips for adjusting the scrollbar in Tailwind (next.js/react)

What is the best way to retrieve data from within HTML tags using PL/SQL?

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

Guide on retrieving data from two separate tables within a single database using PHP

Invisible boundary line within the column

Enable the bottom footer to expand along with the content to support a dynamically growing page

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Splitting columns evenly in a table with a width of 100%

Designing numerous vertical lists in HTML