Overflow hidden for text in css

Question 1

By checking data attribute data-sizex you get how many columns the cell spans. By this you can expand the init function to the following:

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();
}

Or cleaner, and likely preferable. Split it out to own function and say something like:

resize: capHide

Sample fiddle.

If you rather go for the solution proposed by your updated images, one way is to tweak the CSS on resize, using your resize_widget_dimensions function. Sure this can be done better, but as a starter you can have this:

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));

Challenge is that the gridster is a very fluid cake where a lot of the dimensions and positioning is done by JavaScript rather then pure CSS. Anyhow, the above should give a direction on how to tweak it, and might even be good enough ;)

As a final treat you can resize the font according to cell size. I'm not sure how to best find the size you want as you divide the space between icon/image and text. But something like this:

Sample fiddle.

Where you have a hidden span to measure text:

<span id="font_sizer"></span>

With CSS:

#font_sizer {
    position: absolute;
    font-family:'Segoe UI';
    visibility: hidden;
}

And font measure by:

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;
}

You can set font size as:

var fontSize = szFont(this.min_widget_width - 10, 'Objects');

Where this.min_widget_width - 10 is the part where you set size available for text. Then you can say:

var $it = $widget.find('.itemText');
$it.css({fontSize: fontSize + 'px', width:this.min_widget_width, left:this.min_widget_width});

Other notes:

You have a typo in:

var container,
    grister,      // <<-- Missing 'd' in gridster
    resizeTimer;

In extensions you have
```
var data = serializedGrid[i];
this.resize_widget($widget, data.sizex, data.sizey);
```
however a console.log of data show:
```
data.size_x
data.size_y
```
not sure how this fits in. The data attribute uses sizex / y but data property from serialize, (on object), it uses size_x / y with underscore.

Question 2

I think you are looking for media query:

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

Example

Question 3

You can hide text by using below type of CSS

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

now whenever you want to hide text you need to add this class i.e. hide-text on anchor element <a href="#">Objects</a> and vice versa to show text remove class

basically you need to try and figure out best possible solution to fit all requirements Good luck