我有一个包含图像和文本的元素,
Fiddle.注意:调整预览大小以使网格足够大。
这是我的 CSS:
.gridster .gs-w .item{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.gridster .gs-w .item .obj{
background-color: #00A9EC;
}
.gridster .gs-w .item .itemIcon {
height: 100%;
width: 100%;
float:left;
overflow: hidden;
z-index: 10;
}
.gridster .gs-w .item .itemIcon {
background-image: url(http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Apps-Calendar-Metro-icon.png);
background-repeat:no-repeat;
background-size:contain;
align-content: center;
}
.gridster .gs-w .item .itemText{
display: block;
width: 100%;
position: relative;
margin-right: 0px;
right: 0px;
text-align: right;
z-index: 9;
}
.gridster .gs-w .item .itemText a{
vertical-align: center;
text-align:right;
color:white;
padding-right: 10%;
font-size: 14px;
font-weight: 600;
text-decoration:none;
font-family: 'Segoe UI';
}
我想在元素展开时显示文本,在元素折叠时隐藏文本,我想我可以通过CSS实现,但目前还不清楚哪里错了。
这里是折叠的
建议一些 CSS 代码,以防在 CSS 中制作。
最佳答案
你可以 Hook resize.resize .
通过检查数据属性 data-sizex
,您可以获得单元格跨越的列数。通过这个,您可以将 init 函数扩展为以下内容:
public.init = function (elem) {
container = elem;
// Initialize gridster and get API reference.
gridster = $(SELECTOR, elem).gridster({
shift_larger_widgets_down: true,
resize: {
enabled: true,
resize: function (e, ui, $widget) {
var cap = $widget.find('.itemText');
// Hide itemText if cell-span is 1
if ($widget.attr('data-sizex') == 1) {
cap.hide();
} else {
cap.show();
}
}
}
}).data('gridster');
hookWidgetResizer();
}
或更清洁,并且可能更可取。把它拆分成自己的函数,然后说这样的话:
resize: capHide
如果您更愿意采用更新图像提出的解决方案,一种方法是使用 resize_widget_dimensions
函数在调整大小时调整 CSS。当然,这可以做得更好,但作为初学者,您可以这样做:
this.$widgets.each($.proxy(function (i, widget) {
var $widget = $(widget);
var data = serializedGrid[i];
this.resize_widget($widget, data.size_x, data.size_y);
// Find itemText
var $it = $widget.find('.itemText');
// Set CSS values.
$it.css({width:this.min_widget_width, left:this.min_widget_width});
}, this));
挑战在于 gridster 是一个非常流畅的蛋糕,其中许多尺寸和定位是由 JavaScript 而不是纯 CSS 完成的。无论如何,上面应该给出如何调整它的方向,甚至可能已经足够好了;)
作为最后的享受,您可以根据单元格大小调整字体大小。当您划分图标/图像和文本之间的空间时,我不确定如何最好地找到您想要的尺寸。但是像这样:
你有一个隐藏的跨度来测量文本:
<span id="font_sizer"></span>
使用 CSS:
#font_sizer {
position: absolute;
font-family:'Segoe UI';
visibility: hidden;
}
字体测量方式:
function szFont(w, t) {
var s = 1, $fz = $('#font_sizer');
$fz.text(t);
$fz.css('fontSize', s + 'px');
while ($fz.width() < w - 2)
$fz.css('fontSize', ++s + 'px');
return s;
}
您可以将字体大小设置为:
var fontSize = szFont(this.min_widget_width - 10, 'Objects');
this.min_widget_width - 10
是您设置文本可用大小的部分。然后你可以说:
var $it = $widget.find('.itemText');
$it.css({fontSize: fontSize + 'px', width:this.min_widget_width, left:this.min_widget_width});
其他说明:
你有一个错字:
var container, grister, // <<-- Missing 'd' in gridster resizeTimer;
在
扩展
中你有var data = serializedGrid[i]; this.resize_widget($widget, data.sizex, data.sizey);
但是
data
的console.log
显示:data.size_x data.size_y
不确定这如何适应。数据属性使用
sizex
/y
但数据属性来自序列化,(在对象上),它使用size_x
/y
带下划线。
关于javascript - css 中文本的溢出隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22878857/