我已经让这个jsfiddle展示了我现在所拥有的东西。
我正在寻找的是位于右侧div
旁边的行div
左侧的省略号,以便它不重叠(我意识到position
是可能不会在这里工作)。两者都有动态文本。如有必要,我愿意改变这些要素。
编辑:我需要第一行的第一行只在一行上,并在第二行重叠时溢出。到目前为止,答案还没有提供这样做的方法。如果div的内容是静态的,我会设置静态宽度。我可能能够为第二个div
设置静态宽度,因为其内容的可能性有限。
注意:列宽会根据浏览器尺寸而变化。此外,由于页面上存在其他容器/元素,它绝对定位。 (可能不理想)
另一个注意事项:该列可能包含多个row
,因此我只是为了示例而展示了一对。
以下是一些示例代码:
.col {
background-color: pink;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 400px;
}
.row {
background-color: #9595E4;
border-bottom: 1px solid black;
padding: 3px 8px;
}
p {
margin: 0;
padding: 0;
}
.row-top {
position: relative;
height: 19px;
line-height: 19px;
}
.row-top .one {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
}
.row-top .two {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: auto;
height: auto;
font-size: 0.8em;
color: #ccc;
}

<div class="col">
<div class="row">
<div class="row-top">
<div class="one">
This is the first line, part one, which overlaps
</div>
<div class="two">
1st line, part two
</div>
</div>
<p>This is the second line</p>
</div>
<div class="row">
<div class="row-top">
<div class="one">
This content could be really really really really long
</div>
<div class="two">
1st line, part two
</div>
</div>
<p>This is the second line</p>
</div>
<div class="row">
<div class="row-top">
<div class="one">
Or it could be short
</div>
<div class="two">
1st line, part two
</div>
</div>
<p>This is the second line</p>
</div>
</div>
&#13;
答案 0 :(得分:0)
使用css解决方案:https://css-tricks.com/line-clampin/
使用jquery插件的解决方案:http://dotdotdot.frebsite.nl/
答案 1 :(得分:0)
你宣布一栏&amp;在它内部有两排在技术上是错误的。相反,您应该声明一行并根据需要创建任意数量的列(在这种情况下只有两行,因为您只希望左右元素并排放置)。最近我回答了这样一个场景HERE
答案 2 :(得分:0)
我能够通过这个jsfiddle
实现我所需要的以下是代码:
.col {
background-color: pink;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 400px;
}
.row {
background-color: #9595E4;
border-bottom: 1px solid black;
padding: 3px 8px;
}
p {
margin: 0;
padding: 0;
}
.row-top {
position: relative;
height: 19px;
line-height: 19px;
}
.row-top .one {
position: absolute;
top: 0;
right: 125px;
bottom: 0;
left: 0;
width: auto;
height: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
}
.row-top .two {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: auto;
height: auto;
font-size: 0.8em;
color: #ccc;
max-width: 125px;
}
<div class="col">
<div class="row">
<div class="row-top">
<div class="one">
This is the first line, part one, which overlaps
</div>
<div class="two">
1st line, part two
</div>
</div>
<p>This is the second line</p>
</div>
<div class="row">
<div class="row-top">
<div class="one">
This is the first line, part one, which overlaps
</div>
<div class="two">
1st line, part two
</div>
</div>
<p>This is the second line</p>
</div>
</div>
我向第二个max-width: 125px
添加了div
,并在第一个right
上将125px
更改为div
以进行补偿。问题是如果第二个div
的内容小于或大于125px。