javascript - css中文本的溢出隐藏

Question

我有一个带有图像和文字的元素，

小提琴。注意：调整预览大小以使网格足够大。

这是我的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 函数扩展为以下内容：

样品小提琴。

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;
  

• 在extensions你有

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

  然而一个console.log表演data：

  data.size_x
  data.size_y
  

  不知道这如何适合。数据属性使用sizex/y但来自序列化的数据属性（在对象上），它使用size_x/y带下划线。

Answer 2

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

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

例子

Answer 3

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

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

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

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