javascript - css 中文本的溢出隐藏

Question

我有一个包含图像和文本的元素，

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 中制作。

Answer 1

你可以 Hook resize.resize .

通过检查数据属性 data-sizex，您可以获得单元格跨越的列数。通过这个，您可以将 init 函数扩展为以下内容:

Sample fiddle.

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

Sample fiddle.

---

如果您更愿意采用更新图像提出的解决方案，一种方法是使用 resize_widget_dimensions 函数在调整大小时调整 CSS。当然，这可以做得更好，但作为初学者，您可以这样做:

Sample fiddle.

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 完成的。无论如何，上面应该给出如何调整它的方向，甚至可能已经足够好了；)

---

作为最后的享受，您可以根据单元格大小调整字体大小。当您划分图标/图像和文本之间的空间时，我不确定如何最好地找到您想要的尺寸。但是像这样:

Sample fiddle.

你有一个隐藏的跨度来测量文本:

<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 带下划线。