Question

我有一个项目＆＃34;画廊＆＃34;使用图像上方项目的名称。我正在加载xml文件中的所有信息，所以我需要在两行添加动态修改字符串＆＃34; ...＆＃34;到太长的字符串的末尾。有没有办法做到这一点？我更喜欢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行或更多，我想要最多两行。

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;';
}

并在 $ name [name]

中使用 my_crop（$ name [name]，20）

..或者看看，你在数组$ name中有什么，导致字符串

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

看起来已经在修剪某些东西

Answer 3

这是一个Javascript示例。您需要设置div的max-height和overflow。在我的代码片段中，有两种方法可以做到这一点。使用id或按类（对于多个元素）。

＆＃13;

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');

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

这也适用于设置宽度等（如上例所示）。总的来说，当div溢出时，它将省略显示的最后一行。

Answer 4

也许你可以尝试这个approach。

而不是截断文本，只是隐藏它。使用max-height创建包装器，此度量应为number of desired lines * 1 line height。

请注意，这是响应式和跨浏览器。

CSS截断字符串超过两行

4 个答案: