javascript - CSS chop 字符串超过两行

Question

我有一个元素“画廊”，其名称位于图像上方。我正在从 xml 文件加载所有信息，因此我需要在两行中动态修改字符串，在太长的字符串末尾添加“...”。有没有办法做到这一点？我更喜欢 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";

}
 ?>

我希望通过 chop 文本到一定的字符串长度可以工作，但 20 个字符仍然可以跨越 3 行或更多，我想要最多两行。

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>