Question

将白色空间更改为nowrap后，宽度变得太宽。我希望文本只在1行完成，以...结束时达到宽度，但不确定为什么它将宽度推出。宽度似乎没有被遵守。设置最大宽度似乎没问题，但是它没有流畅的响应，并且感觉不是正确的方法。

有什么想法吗？感谢您的帮助 - 对这里发生的事情的解释会很棒！

user.isValid(function (valid) {
    if (!valid) {
        return console.log(user.errors);
    }
    user.save(function(err){
        if (!err) {
            return console.log(err);
        }
        console.log('User created');
    });
})

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

您没有为外部容器定义宽度。所以它会被遗忘：P

使用100％指定宽度（参见示例），然后你就可以了吗？因此内部div具有外部容器宽度的100％。

白色空间nowrap将宽度推向遗忘

1 个答案: