0

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>
user8758206
  • 2,106
  • 4
  • 22
  • 45

2 Answers2

4

* {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%;
}
jdickel
  • 1,437
  • 1
  • 11
  • 21
  • thanks, although not working on my real project for some reason. I definitely specified the parent's width too - there must be another parent width or something – user8758206 Apr 18 '18 at 11:29
  • Yes, if this parent's width is also specified then go over to the next one and check it. Up to the root element. – jdickel Apr 18 '18 at 12:08
  • What do you do when specifying a width on the container doesnt work and the child still pushes past its bounds? – Ben Racicot Jan 10 '19 at 16:10
  • @TR3B I would need to have a look into your Code. – jdickel Jan 10 '19 at 17:24
  • 1
    So it turns out that there is a major gotcha with flexbox layout and this problem. The Automatic Minimum Size of Flex Items will really get you scratching your head... Reset it with `max-width:0;` https://stackoverflow.com/a/36247448/1440240 – Ben Racicot Jan 10 '19 at 21:32
0

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>
Dolan
  • 313
  • 1
  • 4
  • 14