2017-06-16 22 views
-1

これで、画像、タイトル、説明、リンクなどでブートストラップカードを作成しています。説明の長さは50〜250文字であり、幅と高さが固定されています。だから私は説明の長さを取得し、フォントサイズを変更するためにifステートメントにそれをポップアップを考えていた。Javascriptの特定のタグにスタイル(フォントサイズ)を追加するには

font-size を特定の長さ以上の説明にちょうどに適用すると、問題が発生します。 HTMLは、関数内で形成されたのはここ

は次のとおりです。

card.innerHTML = "<div class='card'><img class='card-img-top' src='" + imgAddress + "' alt='Image'><div class='card-block'><h4 class='card-title'>" + title + "</h4><span class='desc'>" + desc + "</span><a href='" + linkAddress + "' download><button class='btn btn-primary'>View on our website</button></a>"+ addSpreadsheet + "</div><div class='card-footer'>Expires: "+ endDate + "</div></div>";

少し厄介なので、基本的に私達はちょうど

<span class='desc'>" + desc + "</span>

この行を必要とする私ができる方法はあります特定のスパンにIDやクラスを追加する私はカード全体のフォントサイズを変更しても機能しますが、明らかに動作しません。

詳細情報やコードが必要な場合はお知らせください。しかし、私はそれが十分であると思う。

<!--This p Tag contain 245 chars , We are going to limit it using javascript--> 
<p id="desc"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consequatur magnam facilis quas dignissimos voluptate tempore, reiciendis quidem quam fuga asperiores, blanditiis inventore modi assumenda maiores mollitia alias perferendis fugiat. 
</p> 

Javaスクリプト:私はあなたが

HTMLのための例を書く

+0

私は状況のこの種では、文字列の固定長を使用します。 PHPやJavaScriptを使用して行うことができます。 PHPでsubstr()を使用して説明テキストを短くします。 – Niroshan

+0

私は長い文字列を収容できる必要があります。より良いコードのために私が妥協することのできない状況。 – ImDone

+0

それでは、テキストを制限せずに隠すことはできませんか?あなたのカードに 'more desc'ボタンを追加しますか? – Niroshan

答えて

1

var e = document.getElementById('desc').innerHTML; 
console.log(e.length); //245 
var newDesc =""; 
for(var i=0; i<=e.length-1; i++){ 
    if(i<100) //Limit it to what ever you want, I limit it to 100 
     newDesc += e[i]; 
    else 
     break; 
} 
    console.log(newDesc.length);// 100 
    document.getElementById('desc').innerHTML= newDesc; 

https://jsfiddle.net/emilvr/t2ekv8w7/

関連する問題