CSSは2行を超えて文字列を切り捨てます

Question

画像の上に項目の名前を持つ「ギャラリー」という項目があります。私はxmlファイルからすべての情報をロードしていますので、長すぎる文字列の末尾に "..."を2行追加して動的に文字列を変更する必要があります。これを行う方法はありますか？私はJSで答えが好きですが、どの言語でもできます。

ここはページのギャラリー部分のコードです。

<?php 

$GO = $game->gameobjects; 

$sets = $GO->sets; 

foreach($sets->set as $set) { 

echo" <h3>$set->name</h3>\n"; 

echo" <div class=\"gallery\">\n"; 

$objects = $set->objects; 

foreach($objects->object as $object) { 

    $url = genurl("$base->name" . "." . $object->img, "png"); 
    $name = trimtext($object->name, 20); 

    echo"  <div class=\"item\"> 
     <div class=\"item-name\" title=\"$name[title]\"> 
     $name[name] 
     </div> 
     <img src=\"$url\" class=\"item-img\"/> 
    </div>\n"; 
} 

echo" </div>\n"; 

} 
?> 

私は仕事と特定の文字列の長さでテキストを切り捨てることで期待していたが、20の文字はまだ3行以上にまたがる可能性があり、私は2つのラインの最大たいです。

Answer 1

.text-limiter { 
 
    overflow: hidden; 
 
    text-overflow:ellipsis; 
 
    white-space: nowrap; 
 
    width:400px; 
 
}

<div class="text-limiter"> 
 
    Lorem ipsum dolor sit amet nunc.<br>Sed nonummy gravida. In eros diam sed urna. Nunc at ipsum. Vestibulum ante ipsum orci, id leo ac risus. Sed sed lacus. Curabitur arcu vitae ante. Lorem ipsum feugiat est, at magna. Vestibulum ante ipsum nibh, volutpat massa dui eget enim. Mauris lobortis eu, rhoncus purus, congue eleifend. Nulla dolor dictum accumsan lorem. Vestibulum convallis cursus a, mattis sem. In cursus dignissim erat a neque mauris, interdum malesuada. Donec sit amet, libero. Donec nec adipiscing elit. Curabitur ultrices velit nulla a mi. Cras nec pede. Pellentesque placerat. Curabitur et turpis. Cras ipsum sed neque. Phasellus hendrerit magna iaculis odio, a mi. Fusce convallis eu, auctor tortor id purus est, at sapien. Etiam varius nec, mattis a, convallis tellus. In hac habitasse platea dictumst. Aenean augue egestas dignissim, libero at turpis. Duis aliquam, purus lacinia neque. Nunc leo. Curabitur scelerisque mauris vitae odio condimentum ac, cursus wisi, posuere cubilia Curae, Donec pulvinar gravida, eros eros sed justo ac nunc iaculis at, molestie aliquam. In nec ligula placerat quam. Phasellus posuere cubilia Curae, Quisque rutrum, urna. 
 
</div>

Answer 2

あなたはCSS

.item-name{ 
    display: -webkit-box; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
} 

...または（あなたは多くのシンボルでなければなりません方法を知っていれば）PHPでカット

function my_crop($text, $length) 
{ 
    if ($length <= 0 || strlen($text) <= $length) 
     return $text; 
    $out = mb_substr($text, 0, $length); 
    $pos = mb_strrpos($out, ' '); 
    if ($pos) 
     $out = mb_substr($out, 0, $pos); 
    return $out.' &hellip;'; 
} 

と使用使用することができますmy_crop（$ name [name]、20）内$名[名]

..orあなたは配列$名に持っているもの、見て、原因列

$name = trimtext($object->name, 20); 

はすでに何か

Answer 3

をトリミングのようになります。ここではあなたのためのJavascriptの例です。あなたはdivのmax-heightとを設定する必要があります。私のスニペットには2つの方法があります。 idまたはクラス（複数の要素の場合）。

function lastLineEllipsWithId(id) { 
 
    var el = document.getElementById(id); 
 
    var wordArray = el.innerHTML.split(' '); 
 
    while (el.scrollHeight > el.offsetHeight) { 
 
    wordArray.pop(); 
 
    el.innerHTML = wordArray.join(' ') + '...'; 
 
    } 
 
} 
 

 
function lastLineEllipsWithClass(elementClass) { 
 
    var elements = document.getElementsByClassName(elementClass); 
 
    for (var i = 0; i < elements.length; i++) { 
 
    var wordArray = elements[i].innerHTML.split(' '); 
 
    while (elements[i].scrollHeight > elements[i].offsetHeight) { 
 
     wordArray.pop(); 
 
     elements[i].innerHTML = wordArray.join(' ') + '...'; 
 
    } 
 
    } 
 
} 
 

 
lastLineEllipsWithId('box'); 
 
lastLineEllipsWithClass('box');

#box { 
 
    height: 40px; 
 
    overflow: hidden; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
} 
 
.box { 
 
    height: 40px; 
 
    overflow: hidden; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
} 
 
.box2 { 
 
    height: 70px; 
 
    width: 300px; 
 
    overflow: hidden; 
 
}

<div id="box"> 
 
    <b>ID BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
 
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
<div class="box"> 
 
    <b>CLASS BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
 
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
<div class="box box2"> 
 
    <b>CLASS BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
 
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

これは、設定された幅など（最後の例に見られるように）を用いても機能します。全体的にdivがオーバーフローすると、最後に表示されている行が省略されます。

Answer 4

多分あなたはこれを試すことができますapproach。

テキストを切り捨てる代わりに、単にそれを隠すだけです。 max-heightのラッパーを作成すると、この数値はnumber of desired lines * 1 line heightになるはずです。

これは応答性が高く、クロスブラウザであることに注意してください。