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

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

Result of utilizing Bootstrap Radio buttons

Is there a way to design a form that appears as though it's levitating above a div element?

Is it possible to send information via the URL while using jQuery Mobile?

What are the steps to modify data within the root component?

Create a scrollable Bootstrap table without impacting the layout grid system

Every time I attempt to create a detail page for a table, I am consistently greeted with an error message

Adjusting the size of content with CSS

Add extra space to the dimensions of the div by incorporating padding

Modifying a Flash Video through JavaScript

Python code to extract text data from a table using XPath

Creating a responsive design with dual backgrounds using Tailwind CSS

Angular - Acquire reference to the <audio> element

Is it possible to modify the underline color while using the transition property in CSS?

Styling the tab view in PrimeFaces

Using Spring Boot RestController to Serve HTML Pages

Understanding the significance of 'href = '<? = variable ?>' on an HTML/PHP webpage

Securing Your Data with PHP and MySQL Password Protection

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

When setting the height to auto in Dreamweaver for a background image, no content will be displayed