gpt4 book ai didi

html - 流体宽度上的省略号

转载 作者:太空宇宙 更新时间:2023-11-04 12:34:33 25 4
gpt4 key购买 nike

我在包装器中有两个 div,我希望第一个 div 的最大宽度为 65%,第二个 div 的最大宽度为 35%,第一个左对齐,第二个右对齐,两者都在同一行(白色-space:nowrap),所以基本上我想要得到的是:

-----------------------------------------------------------------------
| | |
| THIS IS IS SHORT TEXT | NOW THIS LINE COULD BE LONG |
| | |
-----------------------------------------------------------------------

现在最坏的情况:

<----------------- 65% ---------------------->   <------ 35% -------->
-----------------------------------------------------------------------
| | |
| NOW THIS LINE IS LONG AND GROW MORE CAU... | NOW THIS LINE COU... |
| | |
-----------------------------------------------------------------------

我需要在两个文本上显示文本溢出省略号。有什么想法吗?

最佳答案

我想你可以只使用一个左浮动的 DIV:

(请注意,最大宽度仅用于演示目的...您可以让这些宽度达到 100%,它应该仍然有效。)

.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.outer {
background-color: green;
text-align: right;
}

.inner1 {
max-width: 65%;
float: left;
background-color: red;
text-align: left;
}

.inner2 {
display: inline;
}
<div class="truncate outer" style="max-width: 500px;">
<div class="truncate inner1">
THIS IS IS SHORT TEXT
</div>
<div class="inner2">
NOW THIS LINE COULD BE LONG
</div>
</div>

&nbsp;

<div class="truncate outer" style="max-width: 500px">
<div class="truncate inner1">
NOW THIS LINE IS LONG AND GROW MORE CAUTIOUS?
</div>
<div class="inner2">
NOW THIS LINE COULD BE LONG
</div>
</div>

关于html - 流体宽度上的省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27388858/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com