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

サンプルフィドル。

---

更新された画像によって提案された解決策を採用する場合、1 つの方法は、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));

課題は、グリッドスターが非常に流動的なケーキであり、多くの寸法と配置が純粋な CSS ではなく JavaScript によって行われることです。とにかく、上記はそれを微調整する方法についての指示を与えるはずであり、十分に良いかもしれません;)

---

最後に、セルのサイズに合わせてフォントのサイズを変更できます。アイコン/画像とテキストの間のスペースを分割するときに、必要なサイズを見つける方法がわかりません。しかし、このようなもの：

サンプルフィドル。

テキストを測定するための非表示のスパンがある場所:

<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>、その逆でテキスト削除クラスを表示します

基本的に、すべての要件に適合する最善の解決策を見つけ出す必要があります。頑張ってください