CSS将字符串截断两行

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

}
 ?>

我希望通过截断特定字符串长度的文本可以工作，但 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

也许你可以试试这个approach。

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

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

Answer 4

这是一个 Javascript 示例。不过，您需要设置 div 的 max-height 和 overflow。在我的 sn-p 中有两种方法可以做到这一点。使用 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 溢出时，它会省略最后一行可见。