我怎样才能优先考虑一个div比另一个

我想要两个相邻的文本框。第一个应该给第二个更重要的空间。我怎样才能优先考虑一个div比另一个

怎么可能不给固定的宽度和使用文本溢出：省略号放在了第一位？

div { 
 
    border: 1px solid black; 
 
} 
 
#test1 { 
 
    width: 250px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
#test1 > div { 
 
    display: inline-block; 
 
} 
 
#test2 { 
 
    -o-text-overflow: ellipsis; /* Opera */ 
 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
 
    overflow:hidden;    /* don't show excess chars */ 
 
    white-space:nowrap;   /* force single line */ 
 
    vertical-align: bottom; 
 
}

<div id="test1"> 
 
    <div id="test2">long text standing in here</div> 
 
    <div id="test3">more important text in here</div> 
 
</div>

来源

2017-04-18 naja08

这些被动态检索到的内容是什么？ – Swellar

是的，他们不在数据库中 – naja08

给你空间是什么意思？他们是否都想留在一条线上，并且你想怎么处理溢出？ – Pete

您可以使用Flexbox，就和第一个孩子的div设置overflow: hidden和text-overflow: ellipsis。

div { 
 
    border: 1px solid black; 
 
} 
 
#test1 { 
 
    width: 250px; 
 
    display: flex; 
 
} 
 
#test1 > div { 
 
    white-space: nowrap; 
 
} 
 
#test2 { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div id="test1"> 
 
    <div id="test2">long text standing in here</div> 
 
    <div id="test3">more important text in here</div> 
 
</div>

来源

2017-04-18 09:01:23

如果您有支持的浏览器可以支持flexbox，去Flexbox的。

我做了一些示例html给你，告诉你它做了什么。这里神奇的CSS属性：display: flex，flex-direction: row，flex: 1，和flex-basis: 200px

.container 
 
{ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.container > .item 
 
{ 
 
    flex: 1; 
 
    
 
    -o-text-overflow: ellipsis; /* Opera */ 
 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
 
    overflow:hidden;    /* don't show excess chars */ 
 
    white-space:nowrap;   /* force single line */ 
 
    
 
    /* this just added for better view */ 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.container > .item-2 
 
{ 
 
    flex: 2; 
 
    flex-basis: 200px; 
 
}

<div class="container"> 
 
    <div class="item item-1"> 
 
    long text standing in here 
 
    </div> 
 
    <div class="item item-2"> 
 
    more important text in here 
 
    </div> 
 
</div>

来源

2017-04-18 09:04:15 DoXicK

非常感谢那个伟大的答案！不幸的是，如果我将容器更改为flex，我将杀死父级的css：/！它有点棘手，因为我使用的是MDL-框架（我滥用MDL芯片位） – naja08

@ naja08你可以在＃物品1，然后充当容器内加一个孩子。那应该把＃item1作为普通的容器（就像现在这样），但只是在其中添加一个flexbox“容器”。这会起作用吗？ – DoXicK

我怎样才能优先考虑一个div比另一个

回答

相关问题