CSS:如何具有可变列大小与文本溢出省略号
问题描述:
这是开始我发疯,任何帮助表示赞赏!CSS:如何具有可变列大小与文本溢出省略号
我希望每个<li>
不是“固定”的最大宽度为150px,最小宽度为10px,但是当浏览器调整大小时,它们应该缩小以固定(并且宽度相等)。我还希望每个非“固定”<li>
中的文本都具有文本溢出:省略号。
我似乎无法得到这个工作,所以到目前为止,我有:
HTML:
<ul>
<li class="fixed">Fixed Size</li>
<li>
<div>
<span>this text is very very long and it goes on and on and on and on but does not wrap</span>
</div>
</li>
<li>
<div>
<span>short</span>
</div>
</li>
<li>
<div>
<span>one more tab</span>
</div>
</li>
<li>
<div>
<span>another tab</span>
</div>
</li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
border-spacing: 6px 0px;
}
li {
display: table-cell;
background-color: red;
width: 150px;
}
li > div {
overflow: hidden;
text-overflow: ellipsis;
}
li > div > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li.fixed {
width: 100px;
min-width: 100px;
text-align: center;
}
更新:这显示了我在列后的内容秒,但正如你所看到的文本没有隐藏的省略号:
UPDATE:这是越来越近了,但仍然没有省略号:-(
更新:已解决解决方案发布如下。
答
终于得到这个工作...是(是不需要HTML变化)解决方案:
ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
border-spacing: 6px 0px;
}
li {
display: table-cell;
background-color: red;
min-width: 20px;
width: 120px;
}
li.fixed {
width: 100px;
min-width: 100px;
text-align: center;
}
ul > li > div {
display: table;
border-spacing: 0px 0px;
table-layout: fixed;
width: 100%;
}
ul > li > div > span {
display: table-cell;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
答
我相信显示:表并显示:表细胞都是死路一条:表格的布局将始终使用所必需的最大单元格高度以显示所有内容(见下文) - 但你需要的对面。另一方面,桌面布局适合以您描述的方式使用水平空间。
完全不同的方法是使用一些JavaScript库做布点给你。那里有很多。一些示例:
- http://masonry.desandro.com/ “pintrest像” 块
- http://www.datatables.net/的布局 “数据表” 布局
- http://layout.jquery-dev.net/demos/table_fixed_header.html总体布局
- 和许多
P.S.
使用float和简单的HTML你得到的高度,但不是你的宽度要:
<ul>
<li class="fixed">Fixed Size</li>
<li class="ellipsis">this text is very very long and it goes on and on and
on and on but does not wrap</li>
<li>short</li>
<li>one more tab</li>
<li>another tab</li>
</ul>
和CSS
li {
float:left;
min-width: 10px;
}
li.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
li.fixed {
width: 150px;
}
看到这个捣鼓工作示例: http://jsfiddle.net/bjelline/TxDfc/
可以HTML结构被改变? – 2013-05-05 12:40:31
@VimalStan是的,HTML可以改变。 – magritte 2013-05-05 12:42:48
你需要什么椭圆? html会将文本分解成适合你的li(一旦你删除了空白:nowrap;)。您是否希望隐藏部分文本来破解文本以进行多行操作? – bjelli 2013-05-05 12:47:02