Dealing with dynamic width and text-overflow within non-overflowing <div> elements

Question

Dealing with dynamic width and text-overflow within non-overflowing <div> elements

I'm experimenting with a style that gradually expands a border up to 300px, and then uses text-overflow: ellipses when the limit is reached. If you're interested in seeing what I'm working on, feel free to click here to visit a JSFIDDLE demo.

I'd like the longest message text to be cut off at 300px and display an ellipsis. For shorter texts, I want the border to shrink to fit the size of the text. Any suggestions or assistance would be greatly appreciated.

.border{ 
    background-color: #ffffff; 
    border: 3px solid #ffffff; 
    border-radius: 5px; 
    box-shadow: 0px 0px 10px #999999; 
    margin-left: 20px; 
    margin-top: 5px; 
    padding: 2px; 
    position: relative; 
    z-index: 4;
}

.border.small { 
    /* background-image: url('%Image(G3VISIF_EXP_BKGRD_SM)'); */
    box-shadow: 1px 1px 10px #999999; 
    background-size: 100% 100%; 
    height: 22px;
    width: auto;
}


.message { 
    color: #5c5d60; 
    font-family: Arial; 
    font-size: 17px;
    font-weight: bold;
    padding-left: 5px; 
    padding-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
    display: block;
    overflow: hidden;
}

<div class="border small">
    <div class="message">
        Is [GRIDREC:EMPLID] Equals 123456789012345678901234567890
    </div>
</div>

<div class="border small">
    <div class="message">
        Is Part Time
    </div>
</div>

<div class="border small">
    <div class="message">
        Recieves Full Benefits
    </div>
</div>

html css

Answer 1

Answer №1

It's quite straightforward.

Here are a couple of methods (without altering your existing html structure):

1- To have the messages appear on separate lines while maintaining your current structure:

.expression {
    /* other styles */
    float: left;
    clear: left;
}

Example http://jsfiddle.net/L66fs1y5/2/

2- If it is acceptable for the messages to be on the same line within your current structure:

.expression {
    /* other styles */
    display: inline-block;
}

Example http://jsfiddle.net/L66fs1y5/3/

Answer 2

It's quite straightforward.

Here are a couple of methods (without altering your existing html structure):

1- To have the messages appear on separate lines while maintaining your current structure:

.expression {
    /* other styles */
    float: left;
    clear: left;
}

Example http://jsfiddle.net/L66fs1y5/2/

2- If it is acceptable for the messages to be on the same line within your current structure:

.expression {
    /* other styles */
    display: inline-block;
}

Example http://jsfiddle.net/L66fs1y5/3/

Dealing with dynamic width and text-overflow within non-overflowing <div> elements

Answer №1

Similar questions

Webkit feature: Rounded border image overlay

Using CSS to leverage the power of both Grid and Flex simultaneously

Adjust the color quantity based on the item that is being hovered over

What's the deal with the Cordova Splash Screen?

Tips for positioning a button next to a text area

Displacement occurs when the input tag is eliminated

Float to the right, left, and top of the grid

Fixing the Responsive Menu Issues

Blurry text and icons in Bootstrap 3

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

Enhance Website Functionality with Dynamic Tables and Spreadsheet Features

How do I use jQuery to animate a height increase where the added height is applied to the top of the element?

What is the best way to make a JavaScript cookie remember the state of a DIV?

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

Centered Navigation Bar Aligned with Header

Loop through each input element in the form to retrieve the Name and Value using Javascript

Personalize scrollbar appearance in Mozilla Firefox and Internet Explorer

Including Vuetify in my project has triggered a SecurityError, specifically relating to the CSSStyleSheet.cssRules getter being restricted from accessing cross-origin stylesheets

Achieving perfect alignment of two elements using flexbox: centering one and aligning the other to the right

Unable to add padding to <b> tag