In CSS, there are two dynamic fields with adjustable widths, each occupying half of the total length

I have a collection of email addresses and names displayed in rows. My goal is to maximize the amount of content shown. For short names, more of the email address should be visible, while for shorter email addresses, more of the name should be shown. If both the name and email are lengthy, I want them to occupy an equal portion of space. Additionally, any long truncated items should end with an ellipsis.

Is there a way to meet these requirements without using JavaScript? While I would prefer not to use flexbox layouts due to limited browser support, I am open to exploring this option. Keep in mind that everything must remain on a single line without wrapping.

------------- -------------------------------------
| This is a long name...| This is a long email... |
------------- -------------------------------------

|<------------------100% width ------------------>|

<div class='result'>
  <div class='textHolder'>
   <h3>Name</h3>
   <h4>Email</h4>
  </div>
</div>
csshtmllayout

Answer №1

When it comes to a solution without javascript, one option that could work is setting a max-width of 50% for each element and adding a text-overflow with an ellipsis (…) when the text overflows.

However, a potential issue arises if one element has a very small content while another has a substantial amount, as it may only occupy 50% of the full width.

I created a fiddle to demonstrate this approach: http://jsfiddle.net/N36tY/

(I also agree with cimmanon's suggestion of using different tags)

Here is an example of how you can structure the HTML:

<div class='result'>
    <div class='textHolder'>
         <h3>Name</h3>

         <h4>Email</h4>

        <div class="clear"></div>
         <h3>Name and more text, etc and even more to make it overflow</h3>

         <h4>Email</h4>

        <div class="clear"></div>
         <h3>Name and more text, etc and even more to make it overflow</h3>

         <h4>Email and a lot of text and more and even more to make it overflow</h4>

        <div class="clear"></div>
         <h3>Small name</h3>

         <h4>Email and a lot of text and more and even more to make it overflow</h4>

    </div>
</div>

And here is the accompanying CSS code:

.textHolder {
    width: 100%;
}
h3 {
    background: blue;
    color: #FFF;
}
h4 {
    background: green;
    color: #FFF;
}
h3, h4 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    display: block;
    float: left;
    min-width: 10px;
    max-width: 50%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.clear {
    clear: both;
}

Answer №2

@Newtang, I have made the necessary adjustments to the JSFiddle based on your specifications. If the page width is too narrow, ellipses will now appear when expanding or contracting the page.

Feel free to check out the updated code here: http://jsfiddle.net/6gFN9/1/

.textHolder {
    width: 100%;
}
h3, h4 {
    float: left;
    max-width: 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

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

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

I've been trying to center a div element with the mouse cursor, following its movement. However, the current code I have offsets the positioned div from the cursor instead of aligning it perfectly. PROCESS The concept behind my code is to display an ...

javascriptjquerycss

How to rotate text direction using JavaScript and CSS

Despite my extensive efforts, I have been unable to find a solution to a seemingly simple problem. In JavaScript, I have generated dynamic text using the following code: context.fillText('name', 10, 10, 20); Now, I need this text to be ori ...

javascriptcss

Tips for creating a website with an integrated, easy-to-use editing tool

Recently, I designed a website for a friend who isn't well-versed in HTML/CSS/JavaScript. He specifically requested that the site be custom made instead of using a web creator. Now, he needs to have the ability to make changes to the site without nee ...

javascripthtmlcsseditor

What is the best way to structure Vue.js components for optimal organization?

Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...

javascriptcssvue.js

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

I am encountering an issue with my Angular 9 form code. I am getting the error "ERROR TypeError: Cannot read property 'mobile_number' of undefined" and I need help in resolving this problem. <form (ngSubmit)="processForm()"> & ...

htmlangulartypescriptangular-forms

Looking to include an if/then statement for an item that has been generated within a div?

While I may not be a seasoned programmer, I am facing an issue that requires some problem-solving. Allow me to explain the situation to the best of my ability. Within a "div" element, I have implemented a v-for loop that sets a value in a variable for dis ...

htmlvue.js

Using CSS and jQuery to Enhance Page Transitions

Seeking assistance with creating a unique page transition similar to this one: Basing the animation on my own design concept found here: Current experiment can be viewed at: https://jsfiddle.net/f7xpe0fo/1/ The animation does not align with my design vi ...

jqueryhtmlcss

Firefox experiencing issues with the onchange event

Here in this block of code, I have two dropdown lists: one for department and the other for section name. Based on the selected department, I dynamically change the options available for the section name dropdown list and then populate the values from both ...

javascripthtmlfirefox

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

javascripthtmlcssvisible

Stop capturing mouse and keyboard events within a specific div element on all web browsers

I manage a website with forms that have jquery autosave features and are updated using ajax. These forms include various types of input elements such as textboxes, jQuery UI datepickers, and time pickers... <div id="content"> <form id="line1"&g ...

javascriptjqueryhtml

Integrate Tailwind CSS into the bundled JavaScript file

Is there a way to integrate tailwind css into bundle js effectively? Take a look at this example involving vue 3 and tailwind 3 https://github.com/musashiM82/vue-webpack. Upon executing npm run build , it generates 3 files: app.js ABOUTPAGE.js app.6cba1 ...

javascriptcssvue.jstailwind-css

One project contains a pair of React instances

I am currently working on a React Web App and recently encountered an issue with an 'invalid hook call' error. Upon further investigation, I discovered that there are duplicate copies of the React library in my project, including within the CSS f ...

javascripthtmlreactjswebpackredux

Ways to eliminate the default margin surrounding an image within a div

Struggling with CSS while building websites is a common issue for me. In my current project, I have encountered a challenge where I placed two images inside a div container. Oddly enough, when I add text to the div, it adjusts its height accordingly. How ...

htmlcssimage

Is the CSS content-visibility property compatible with background images?

Can CSS content-visibility and contain-intrinsic-size also be used with the background-image property, or do they only work with IMG tags? Will either of these properties have any impact on the following code snippet? <span id="image"> #i ...

htmlcss

The end of the /if in the small template system fails to correctly detect the desired condition

If I write the following line on its own, he cuts it without any reason. So...: Greetings, I'm in need of assistance regarding an issue that is currently beyond my understanding. I'm facing a challenge with a small TPL-System which requires so ...

phphtmlregex

Is there a way to modify the border shape of items in the navigation bar?

Is there a way to achieve this particular shape when the current page is being displayed? https://i.stack.imgur.com/HELTM.jpg This is how my current code looks: current { transform: skew(-20deg); border: 1px solid white; color: black; background ...

htmlcss

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

javascriptjqueryhtmlcss

Uncertainties surrounding the use of JSON data versus a JavaScript object

As a newcomer to programming, I have ventured into Stack Overflow and W3schools to enhance my skills. Recently, I created a small project for educational purposes. One dilemma is bothering me - is the JSON file I generated actually in proper JSON format o ...

javascriptjsonajaxhtml

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

Utilizing facebox, I am initiating a small modal dialog with a form and attempting to retrieve the value from a text field on that form using javascript. Below is the HTML code: <div id="dialog-form95" style="display:none"> <div class="block"> ...

javascripthtmlcssgetelementbyidfacebox

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

javascriptcssreactjssassnext.js