我需要创建一个设计,最终用户将看到包含两个组件的单行文本.在text-align:left div可能有文字的任意长度.在text-align:right div通常为约9或10个字符长,但可以想见会高达20-一些字符.
以下是最终用户需要看到的内容:
text-align:left文本应用于ellipsis在单行文本中隐藏任何不适合屏幕的文本.text-align-right文本应始终在屏幕上在同一条线.text-align:left div应该等于浏览器窗口的宽度减去text-align:right文本的宽度div.text-align:right div应该等于其中文本的宽度加上其水平padding.我几乎让这个工作在一个小提琴,但在那我需要使用固定的宽度text-align:right div.这是HTML:
<body>
<div id="wrap">
<div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
<div id="right">Right</div>
</div>
</body>
这是CSS:
* {border:0; margin:0; padding:0;}
html, body {background-color:gray; height:100%; width:100%}
#left, #right {padding:5px;}
#left {
background-color:red;
float:left;
text-align:left;
width:calc(100% - 120px); /* deducted amount = width of #right + total horizontal padding*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#right {
background-color:orange;
float:right;
text-align:right;
white-space: nowrap;
width:100px;
}
我可以想象在这里跳转到JQuery并根据它的宽度设置width两个divs的s text-align:right div,但我真的更喜欢用CSS解决这个问题.
以前我试着用display:table和display:table-cell来做到这一点,但我跑进使用的各种问题ellipsis与table-cell.使用table-layout:fixed没有正确显示ellipsis,也没有display:block,也没有设置max-width.我很乐意使用,table-cell如果那样做的话.
那么有没有办法用纯CSS做到这一点？
1)float:left从你的左侧div和
2)添加display:block你的左侧div
和宾果游戏! - 正确的div只占用所需的空间 - 不再给它一个固定的宽度.
UPDATED FIDDLE + FIDDLE 2(只是为了证明它有效)
<div id="wrap">
<div id="right">Right</div>
<div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
</div>
#wrap
{
width: 100%;
}
#left, #right {padding:5px;}
#left {
background-color:red;
text-align:left;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#right {
background-color:orange;
float:right;
text-align:right;
white-space: nowrap;
}