What is the best way to set the width of an element to its maximum size without causing a line break?

I am relatively new to CSS and I am trying to figure out how to display a long line of text with ellipses when it overflows. You can see a working example in this jsfiddle.

However, when you extend the window, the text is limited to 100px due to the max-width: 100px attribute. Removing the max-width attribute causes the text to never shrink as shown in this example:

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

I want the text to expand as much as possible without breaking onto a new line. Here's how it should look for different window widths:

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

https://i.sstatic.net/6O3rm.png

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

Can anyone advise me on how to achieve this?

htmlcsswidthoverflow

Answer №1

To solve this issue, consider using the CSS property display: block; instead of display: inline-block;. Additionally, you can include margin-right: 75px; to prevent text overlapping with the button.

.one-line-only {
    font-family: monospace;
    display: block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 75px; /* Adjust value as needed */
}

Apply the above CSS to your button and also add margin-top: -20px; to align the button properly.

.b{
    margin-top: -20px; /* Adjust value as needed */
    float:right;
}

<span class="one-line-only"> Content on the left side ---- Thisisareallylongthingwhichshouldbestoppedatsomepointforsure </span>
<button class='b'>Content on the right side </button>

Check out the JSFIDDLE DEMO for reference

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

PHP/HTML Contact Form that sends messages to a designated email address depending on the option selected in

UPDATED: I recently created a contact form using HTML/PHP. I want to enhance user experience by allowing them to choose a specific department from a dropdown menu and have their email routed directly to that department's designated email address. My ...

phpjqueryhtmlemailcontact-form

Tips for showcasing an uploaded image with ajax

I am looking to upload an image and display it without having to reload the page. I believe this can be achieved using Ajax form submission. However, I have tried some code but the Ajax form submit function does not seem to be working for me. Can someone p ...

javascriptphpjqueryhtmlajax

The collapsible feature seems to be malfunctioning in Bootstrap

I attempted to create a button using Bootstrap that would reveal hidden content when clicked, but it doesn't seem to be working. Any suggestions or advice on how to make it function properly? <button class="bc2 border-primary bg-primary rounde ...

htmlfrontendbootstrap-5web-frontend

Issue with PrimeNG Carousel width on mobile devices

Currently, I am in the process of developing a system interface with Angular and PrimeNG specifically for mobile devices. The main requirement is to have a carousel to display a set of cards. After evaluating different options, I decided to utilize the ngP ...

javascripthtmlcssangularprimeng

What is the best way to add a CSS style to any element that has the .btn:hover pseudo-class, except for those elements with the class '.dropdown-toggle'?

Is there a way to apply a style to all my .btn elements when hovering, except for those with the .dropdown-toggle class? I've tried a couple of methods but ran into some issues: attempt 1: .btn:not(.dropdown-toggle):hover { background-color: inher ...

javascriptcssbootstrap-5

Placing text beside an image

I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...

phphtmlcss

Understanding the read status of WhatsApp messages

I am seeking assistance with HTML layout and dynamically parsing content. My objective is to parse contacts who have read a specific message in the group. I have attempted to examine the DOM structure for the DIV block that contains these contacts, but it ...

pythonc#htmlselenium-webdriverhtml-parsing

Is there a way to deactivate a div in Blazor when clicking outside of the div?

Is it possible to have two divs on a single page, where one appears on the right side and the other on the left side? Is there a way to close or hide the left side div whenever we click on the right side div? ...

c#htmlcssasp.net-coreblazor

Is it necessary to save the details of a specific position in local storage when sliding?

Currently, I am in the process of replicating a webpage design from . I have written the code for the functionality where images and phrases change on every slide. There are three different phrases and images that are being displayed, and my goal is to sto ...

javascripthtmlcss

How can I validate a password input in a form on click and reveal a hidden div on the same page without refreshing?

I've been attempting to create a password-only form that reveals a hidden div on the same page when the correct password is entered. I want to avoid reloading the page, but I'm unsure of how to achieve this. function checkPassword() { var co ...

javascripthtmlcssformspasswords

Using Percentage-Based Margin in React-Native

I've encountered a problem in my React Native project where using a percentage value for the margin style attribute seems to shrink the height of one of my View components. However, if I switch to using an absolute value, the issue disappears and ever ...

cssreactjsreact-nativeflexboxreact-native-flexbox

Issue with Opening OpenLayers Map after Using the Onclick Function in JQuery

I am facing an issue with my OpenLayers map on my JQM website. It seems to be failing to load properly, and I suspect that the problem lies with the onclick() method. I have explored using the .click() method on the JQuery site as an alternative, but I am ...

phpjqueryhtmljquery-mobileopenlayers

In AngularJs, users can select multiple options using check-boxes, which will automatically generate a tag based on the selected choices. Additionally,

I am looking to implement a feature where users can make multiple selections using checkboxes. Based on their selections, tags will be created using an Angular directive. If a user selects multiple checkboxes, corresponding tags should be generated. If a t ...

jqueryhtmlangularjsangularjs-directiveangularjs-scope

What is the method for specifying a JSON object within a DOM element's `data` attribute?

In an attempt to store JSON data within a dataset attribute, I encountered the following HTML structure: The appearance of the HTML is as follows <div data-switch="true" data-json="{'key1': 'value 1'}, {'key2': 'valu ...

javascriptjqueryhtmljson

What steps should I take to modify the URL using the SELECT tag?

Having a bunch of SELECT tags in place <select id="url"> <option id="url1" >url 1</option> <option id="url2" >url 2</option> </select> <button onclick="go()">GO</button> Followed by the associated scrip ...

javascriptjqueryhtmlajax

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

htmlcss

It is my desire to develop a forum featuring a graphical representation or visual aid showcasing the total number of active members within the community

I'm exploring the idea of adding a visual representation, like a graph, to display the number of members in a forum. Can anyone recommend a platform or service that would allow me to create an interactive graph showing the total membership count in a ...

htmlgraphforummybb

Issue with JQuery causing maxlength input not to work

Is there a way to use JQuery to set the maxlength attribute for an input[type='text'] while users are typing, so that once the max value is reached, input will stop? This is the code I have been trying: $(document).ready(function(){ $(&apos ...

jqueryhtml

Enhance link with dynamic content using an AJAX call

I need help appending a picture after a link with the same URL as the link. The current AJAX code is producing the following result: <a href="images/Draadloos.png" data-lightbox="gallerij"></a> Here is an example of what I would like to achie ...

javascripthtmlajax

Generate captivating background visuals with animated elements that evolve over time

I need help creating a dynamic background image that transitions smoothly every few seconds. The current code I have doesn't include animation, and the images are taking too long to load. Is there a way to optimize the loading time? Here's my ex ...

htmlcssanimationbackgroundbackground-image