web-dev-qa-db-ja.com

jqueryを使用せずにdiv / span要素のオーバーフローにドット/省略記号を追加する

dotdotdot jQueryプラグインと同様の機能を実装する必要がありますが、javascriptフレームワーク（jqueryやextなど）は使用できません。

コンテンツがより多くのスペースを必要とする場合、divまたはspan要素のコンテンツにドットを追加する簡単な方法はありますか？ （cssオーバーフローと同様：省略記号設定の機能）

高さが制限されていると多くの行で機能しないため、省略記号は使用できません。

ありがとうございました ：）

javascripthtmlcssoverflowconstraints
13
Bohdan

私の問題に対する私の解決策は少し厄介に思えるかもしれませんが、それは私にとってはうまくいきます:)

私はCSSを少し使用しました：

Word-wrap: break-Word;

およびJavascript：

var spans = document.getElementsByTagName("span");
for (var i in spans) {
    var span = spans[i];
    if (/*some condition to filter spans*/) { // just 
        if (navigator.appName == 'Microsoft Internet Explorer') {
            span.parentNode.style.display ='inline-block';
        }
        if (span.parentNode.clientHeight > 50 ) {
            span.innerHTML = span.innerHTML.substr(0, 26) + ' ...';
        }
    }
}
1
Bohdan

CSSプロパティのtext-overflowを使用しないのはなぜですか？タグに幅を定義する限り、これはうまく機能します。

CSSのクラス：

.clipped {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: Ellipsis;
    }
    
<div class="clipped" style="width: 100px;" title="This is a long text">This is a long text<div>

テキストをtitle属性に追加して、ユーザーが要素にカーソルを合わせたときにテキスト全体を表示できるようにすることもできます。

28
martinstoeckli

あなたは試すことができます：

text-overflow: Ellipsis;
-o-text-overflow: Ellipsis;

これは、要素のサイズが動的でない場合にのみ機能します。より多くのコンテンツを許可するために、幅が大きくならないように、幅を設定するか、その他のメカニズムを設定する必要があります。

1
arb

Javascriptを使用せずに、任意の数の行と任意の幅で機能し、応答性があります。 max-heightを行の高さの倍数に設定するだけです。つまり、（22pxの行の高さ）*（最大3行のテキスト）=（最大の高さ66px）です。

https://codepen.io/freer4/pen/prKLPy

html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}

.Ellipsis{
  overflow:hidden;
  margin-bottom:1em;
  position:relative;
}

.Ellipsis:before {
  content: "\02026";  
  position: absolute;
  bottom: 0; 
  right:0;
  width: 1.8em; 
  height:22px;
  margin-left: -1.8em;
  padding-right: 5px;
  text-align: right;
  background-size: 100% 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 40%, white);
  z-index:2;
}
.Ellipsis::after{
  content:"";
  position:relative;
  display:block;
  float:right;
  background:#FFF;
  width:3em;
  height:22px;
  margin-top:-22px;
  z-index:3;
}

/*For testing*/
.Ellipsis{
  max-width:500px;
  text-align:justify;
}
.Ellipsis-3{
  max-height:66px;
}

.Ellipsis-5{
  max-height:110px;
}
<div class="Ellipsis ellipsis-3">
  <p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p>  
</div>

<div class="Ellipsis ellipsis-5">
  <p>The number of lines shown is easily controlled by setting the max-height of the .Ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p>  
</div>
1
Randy Hall

すべてのブラウザの場合：

.dotdot{ white-space: nowrap; text-overflow: Ellipsis; overflow: hidden; max-width:80px}
.dotdot:before { content: '';}

<div class="dotdot">[Button Text Goes here][1]</div>
0
Harikaran K