は、テキストのオーバーフローを持つ要素にタイトルタグを追加：省略記号

Question

は、私は、これは容易に可能であるかどうかわからないのですが、私は場合にだけ求めるだろうと思った：私は、リスト上の次のCSSルールを使用しています

をテキスト：

{ 
    width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

予想したように、リスト外になった任意のテキストが切り捨てられ、最後に置か省略記号を持っています。

リスト上でtext-overflowルールをトリガするリストアイテムに対してのみ、アクティブなタイトルタグが必要です。したがって、切り詰められたテキストの上にマウスを置くと、フルテキストのツールチップが表示されます。

何かは、不可能ではないにしても、これを行うのは難しいと私に伝えています。しかし、私は間違っていることが証明されたい。私は可能な限り小さなJavaScriptを使用するソリューションを探していることが望ましいです。

Answer 1

同様の、より一般的な省略記号を使用します。ほとんどの場合、完全に機能します。 title属性もすべての要素に適用します。要素が省略された場合にのみタイトルを適用することは、実際には困難です。以下の例では、要素が親要素と同じ幅を持つ場合、タイトルを設定する必要があると想定しています。 ifステートメントがなければ、常にタイトルが適用されます。

document.querySelectorAll('.ellipsify').forEach(function (elem) { 
 
    if (parseFloat(window.getComputedStyle(elem).width) === parseFloat(window.getComputedStyle(elem.parentElement).width)) { 
 
    elem.setAttribute('title', elem.textContent); 
 
    } 
 
});

.ellipsify { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    max-width: 100%; 
 
    display: inline-block; 
 
} 
 

 
div { 
 
    width: 100px; 
 
}

<div> 
 
    <span class="ellipsify">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> 
 
    <span class="ellipsify">dolor sit amet</span> 
 
</div>

Answer 2

あなたは少しJavaScriptを使用してオーバーフローの有無を測定し、唯一のそれは要素がオーバーフローしているならば（それが切り捨てられていなかった）title属性を追加することができます。

• コンテンツをスタイルで拘束します。
• 内容を同じ幅の隠れたテスト要素にコピーします。
• テスト要素の折り返しを制限して、オーバーフローさせます。
• 高さを比較してください。

$(".smart-overflow").each(function() { 
 

 
    var elementToTest = $(this), 
 
    contentToTest = $(this).text(), 
 
    testElement = $("<div/>").css({ 
 
     position: "absolute", 
 
     left: "-10000px", 
 
     width: elementToTest.width() + "px" 
 
    }).appendTo("body").text(contentToTest); 
 

 
    if (testElement.height() > elementToTest.height()) { 
 
    elementToTest.attr("title", contentToTest); 
 
    } 
 
});

.smart-overflow { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    Longer text; there should be a tooltip here. 
 
</div> 
 
<div class="smart-overflow"> 
 
    More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper, 
 
    blandit facilisis magna gravida. Nulla a euismod turpis. 
 
</div> 
 
<div class="smart-overflow"> 
 
    More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper, 
 
    blandit facilisis magna gravida. Nulla a euismod turpis. 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div>

_{jQueryのは、簡潔にするため、ここで使用されるが、確かに必須ではありません。}

Answer 3

これは私が解決策に近づいた方法です。

java-scriptを使用しない場合は、ここで

はいじるへのリンクです：https://jsfiddle.net/fryc4j52/1/

SNIPPET：

.ellipse{ 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.content li{ 
 
    margin:0; 
 
    padding:0; 
 
    overflow:hidden; 
 
} 
 
.ellipse:hover{ 
 
    width: auto; 
 
    border: 2px solid #eee; 
 
    box-shadow: 0px 3px 10px 0px black; 
 
    padding:2px; 
 
    white-space: normal; 
 
    word-break: break-word; 
 
    z-index:5; 
 
}

<ul class="content"> 
 
    <li class="ellipse">A very looooooooooooooooooooooooooooooooooooooong line.</li> 
 
    <li> Other text</li> 
 
    <li class="ellipse">A veryvvvvvvvvvvvvvvvvvvvvvvverrrrryyyyyyyyy looooooooooooooooooooooooooooooooooooooong line.</li> 
 
</ul>

Answer 4

document.querySelectorAll('.ellipsis').forEach(function (e) { 
     if (e.offsetWidth < e.scrollWidth) { 
      e.setAttribute('title', e.textContent); 
     } else{ 
      e.removeAttribute('title'); 
     } 
    }); 

.ellipsis { 
    text-overflow: ellipsis; 
    display: inline-block; 
    max-width: 100%; 
    overflow: hidden; 
    white-space: nowrap; 
}