在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

您可以加入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;
  

• 在extensions你有

  var data = serializedGrid[i];
  this.resize_widget($widget, data.sizex, data.sizey);
  

  console.log data显示：

  data.size_x
  data.size_y
  

  不确定这是如何适应的。数据属性使用sizex / y但来自serialize的数据属性（在对象上），它使用size_x / y下划线。

Answer 2

我认为您正在寻找媒体查询：

@media all and (max-width: 760px) {
    .gridster .gs-w .item .itemText {
        display: none;
    }
}

Example

Answer 3

您可以使用以下类型的CSS隐藏文字

.gridster .gs-w .item .itemText a.hide-text {
    text-align: left;
    text-indent: -99999px;
    display: inline-block;
}

现在，无论何时想要隐藏文本，都需要添加此类，即在锚元素<a href="#">Objects</a>上隐藏文本，反之亦然，以显示文本删除类

基本上你需要尝试找出最适合所有要求的解决方案祝你好运