Increasing width endlessly with the use of White Space nowrap

When I changed the white space to nowrap, the width of the text became too wide. My goal is to have the text finish on one line only and end with ... when the width is reached. But for some reason, it pushes the width out instead. It seems like the widths are not being obeyed properly. While setting a max-width works, it doesn't make the design fluidly responsive which doesn't feel like the right approach.

Any suggestions or ideas? Thanks in advance for any help. An explanation of what is happening here would be very helpful!

* {box-sizing:border-box;}
.listingItem {
background: #f0f0f0;
margin: 10px 0;
padding: 10px 20px;
float: left;
position: relative;          
}
.listingItemData {
float: left;
width: 100%;
}
.listingDisplayLeft {
width: 35%;
float: left;
padding-right: 20px;
}
.listingDisplayRight {
width: 65%;
float: left;
}
.listingItemText {
float: left;
overflow: hidden;
width: 100%;
}
.listingItemTextDetails {
background: pink;
width: 100%;
float:  left;
overflow: hidden;
text-overflow: ellipsis;
white-space:  nowrap;
}
.listingItemText .listingItemTextButton {
background: #375db5;
color: #fff !important;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
float: left;
display: block;
font-size: 17px !important;
}
<div class="listingItem">
<input type="hidden" class="listingItemData" value="32142|32142|t|f">
<div class="listingItemData">
<div class="listingDisplayLeft"><a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details"><img src="http://assets.worldwildlife.org/photos/907/images/story_full_width/sumatran-tiger-hero_92514619.jpg?1345581518" style="width:100%;max-width:1024px" alt=""></a></div>
<div class="listingDisplayRight">
<div class="listingItemText">

<h3>
<a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">test tiger demo</a>
</h3>

<div class="listingItemTextDetails">
i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger.
<br>
<br>i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger.
</div>
<a class="listingItemTextButton" href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">More information</a>
</div>
</div>

</div>
</div>

htmlcss

Answer №1

* {box-sizing:border-box;}
.listingItem {
    background: #f0f0f0;
    margin: 10px 0;
    padding: 10px 20px;
    float: left;
  position: relative;
  width:100%;
}
.listingItemData {
    float: left;
    width: 100%;
}
.listingDisplayLeft {
    width: 35%;
    float: left;
    padding-right: 20px;
}
.listingDisplayRight {
    width: 65%;
    float: left;
}
.listingItemText {
    float: left;
    overflow: hidden;
    width: 100%;
}
.listingItemTextDetails {
  background: pink;
    width: 100%;
    float:  left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:  nowrap;
}
.listingItemText .listingItemTextButton {
    background: #375db5;
    color: #fff !important;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    float: left;
    display: block;
    font-size: 17px !important;
}
<div class="listingItem">
    <input type="hidden" class="listingItemData" value="32142|32142|t|f">
    <div class="listingItemData">
        <div class="listingDisplayLeft"><a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details"><img src="http://assets.worldwildlife.org/photos/907/images/story_full_width/sumatran-tiger-hero_92514619.jpg?1345581518" style="width:100%;max-width:1024px" alt=""></a></div>
        <div class="listingDisplayRight">
            <div class="listingItemText">
                
                <h3>
                    <a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">test tiger demo</a>
                </h3>
                
                <div class="listingItemTextDetails">
                I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. 
<br>
<br>I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger. I misplaced my pet tiger.
                </div>
                <a class="listingItemTextButton" href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">More information</a>
            </div>
        </div>
        
    </div>
</div>

You didn't set a width for the outer container, causing it to extend infinitely.

To fix this issue, define the width of the outer container as 100% (as shown in the example) and everything will work correctly. This way, the inner <div> will have a width equal to that of the outer container.

I've included the following line in the CSS above

.listingItem {
  width: 100%;
}

Answer №2

If you apply the display: grid property to the parent element .listingItemText, it will automatically adjust the width without requiring a specific numerical value. Check out the example provided below for more clarity.

* {box-sizing:border-box;}
.listingItem {
    background: #f0f0f0;
    margin: 10px 0;
    padding: 10px 20px;
    float: left;
  position: relative;
}
.listingItemData {
    float: left;
    width: 100%;
}
.listingDisplayLeft {
    width: 35%;
    float: left;
    padding-right: 20px;
}
.listingDisplayRight {
    width: 65%;
    float: left;
}
.listingItemText {
    display: grid;
    float: left;
    overflow: hidden;
    width: 100%;
}
.listingItemTextDetails {
  background: pink;
    width: 100%;
    float:  left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:  nowrap;
}
.listingItemText .listingItemTextButton {
    background: #375db5;
    color: #fff !important;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    float: left;
    display: block;
    font-size: 17px !important;
}
<div class="listingItem">
    <input type="hidden" class="listingItemData" value="32142|32142|t|f">
    <div class="listingItemData">
        <div class="listingDisplayLeft"><a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details"><img src="http://assets.worldwildlife.org/photos/907/images/story_full_width/sumatran-tiger-hero_92514619.jpg?1345581518" style="width:100%;max-width:1024px" alt=""></a></div>
        <div class="listingDisplayRight">
            <div class="listingItemText">
                
                <h3>
                    <a href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">test tiger demo</a>
                </h3>
                
                <div class="listingItemTextDetails">
                i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. 
<br>
<br>i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger. i lost my pet tiger.
                </div>
                <a class="listingItemTextButton" href="/listings/lost-pets/view/32142/test-tiger-demo/" title="View full details">More information</a>
            </div>
        </div>
        
    </div>
</div>

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

How can you create a fixed column with horizontal scroll in Bootstrap?

Imagine I have the following table structure: <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>#</th> <th>Table heading< ...

htmlcsstwitter-bootstraphtml-table

How to center align a <p> element along with a <select> element

Having some trouble while redesigning a simple survey page. I want to center-align the p tag with the select tag without using display:flex inside the .combobox class. The goal is to have them on the same line and still be centered. The current layout loo ...

htmlcss

Enhance User Experience by Making Each Background Slideshow Image Clickable

I want to create a background image slideshow for my photography portfolio. Each image should fade in and link to its respective gallery. I also want the text box to fade with the images and link to the corresponding gallery. The challenge is adding the li ...

htmlcss

Issues with implementation of map and swiper carousel functionality in JavaScript

I am trying to populate a Swiper slider carousel with images from an array of objects. However, when I use map in the fetch to generate the HTML img tag with the image data, it is not behaving as expected. All the images are displaying in the first div a ...

javascripthtmlarraysswiper.js

At the header of my webpage, there is a subtle grey border

As a beginner in the world of HTML website building, I am currently working on creating a fast food website. My goal is to have a "Home", "Menu", and "Contact" links at the top of my webpage, but I am struggling with adjusting the margin and padding. Here ...

htmlcssnew-operator

Automatically scroll a div when the internal div is in focus

I want to create a scrollable div that allows for scrolling even when the mouse is over the content inside the div, not just on the blank areas beside it. Here is the code I am currently using: var main = document.getElementById('main-site'); va ...

javascriptjqueryhtmlcss

Using jQuery to load and parse a JSON file stored on a local system

I am a beginner in scripting languages and recently searched for ways to load and parse JSON files using jQuery. I found helpful resources on Stack Overflow. The JSON file I am working with is called new.json. { "a": [ {"name":"avc"}, ...

javascriptjqueryhtmljson

Tips for aligning icons and text correctly within a table

I can't seem to align the icon vertically with the text. Currently, the image icon is positioned in the middle of the <td> tag, but I want it at the top, as shown in the jsfiddle: http://jsfiddle.net/TheAmazingKnight/N6fLp/ To help visualize th ...

csshtmlhtml-tabletablelayout

Is it possible to modify this jquery keyboard navigation to accommodate different tags and additional keyboard functions?

I am currently in the process of developing a basic website featuring images arranged vertically on the page. My goal is to enable smooth scrolling between these images using the keyboard arrow keys. With the assistance of this forum, I have been provided ...

javascriptjqueryhtml

Issue with background image resizing when touched on mobile Chrome due to background-size property set to cover

My current challenge involves setting a background image for a mobile page using a new image specifically designed for mobile devices. The image is set with the property background-size: cover, and it works perfectly on all platforms except for mobile Chro ...

javascriptjqueryhtmlcssjquery-mobile

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

javascripthtmlcss

Utilizing SVG and CSS together: Implementing clip-path in a flexbox layout

This task may seem simple to some, but I am struggling to mask an image with an SVG graphic. I have created an SVG with the clipPath element: <svg id="heart-path-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 ...

htmlcsssvg

Unable to render nested HTML tag in simple React.JS component

I'm currently working on setting up my first component. After following a tutorial, I tried implementing their code to create the component. The code does inject the first <div> into the HTML document, but the <h1> element is missing. In ...

javascripthtmlreactjs

Adjusting the chosen option in a Drop-Down Menu when a new value is selected within the same menu

I'm currently working on implementing an authentication system for my website that mimics the security style used in Online Banking. In this setup, the user will be required to select specific characters from a secret passphrase by choosing them from ...

jqueryhtml

Dynamic Bootstrap tooltip

I have a simple Javascript code snippet that I'm struggling with: $("#myinput").hover(function(){ if(condition){ $(this).tooltip({placement: "bottom", title: "mytitle"}); } ); Accompanied by its HTML cou ...

javascripthtmlbootstrap-5

Guide on how to display the header of GridView on every printed page

Is there a way to include the page title and GridView header on each printed page? I am looking for a solution to display the page title and GridView heading on every printout. While using page breaks to split the GridView across multiple pages, I notice ...

javascriptasp.netcssvb.net

Creating Canvas dimensions to match the dimensions of a rectangle specified by the user

When the code below runs, it correctly generates a rectangle the same size as the canvas on start-up. However, an issue arises when the user clicks the button to generate a new canvas - the rectangle does not appear. Can someone please provide assistance ...

javascriptjqueryhtmlcanvas

Enhanced browsing experience with personalized search suggestions

As a developer, I am aware that you have the ability to customize the browser's suggestions for various fields. For example, specifying that a field is for email and only suggesting values for email fields in the future. Is this functionality really ...

htmlbrowserautocomplete

Incorporating external CSS stylesheets into a custom LESS framework

Is there a reliable method for integrating a third-party CSS file obtained from an external source into my own LESS compile structure without making many changes to it? I anticipate that the external CSS file may be updated periodically, so I would prefer ...

csslessstylesheet

Is there a way to modify the CSS or add custom styling within an iframe form?

Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...

javascripthtmlcsswordpressiframe