CODEWITHSUNDEEP
htmlcss
user8758206
user8758206

Reputation: 2191

White Space nowrap Pushes width to oblivion

After changing the white space to nowrap, the width became way too wide. I want the text to finish on 1 line only, ending in ... when the width is reached, but not sure why it pushes the width out. The widths don't seem to be obeyed. Setting a max-width seems to be ok, but then it's not fluidly responsive and doesn't feel like the right way to do it.

Any ideas? Thanks for any help - an explanation of what's going on here would be great!

* {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>

Upvotes: 1

Views: 4477

Answers (2)

jdickel
jdickel

Reputation: 1457

* {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 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>

You did not define a width for the outer container. So it runs into oblivion.

Specify the width of the outer container to 100% (see example) and then you're fine. So the inner <div> has 100% of the width of the outer container.

I've added the following line to the CSS above

.listingItem {
  width: 100%;
}

Upvotes: 5

Dolan
Dolan

Reputation: 358

Setting display: grid on the parent .listingItemText will constrain the width without setting the width to an exact number. See example below.

* {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>

Upvotes: 1

Related Questions