主页 / 问题 / 743459
Accepted
pridan
Asked:2020-11-12 08:41:40 +0800 CST2020-11-12 08:41:40 +0800 CST

修剪 JS 字符串

  • 772

你好。有一个列表。如果列表项包含超过一定数量的字符，则应将这些字符截去，并在末尾插入三个点。现在，如果至少在一个段落中，字符多于所需字符，则在所有段落中截断该行并复制到所有段落。嗯，不应该。告诉我如何只在字符数超过允许的 CSS 属性的点处截断行，这是 text-overflow:ellipsis不合适的，因为如果有两行则不起作用。

function cutStr() {
  var size = 15,
    cutStr = $('li a'),
    strText = cutStr.text();


  if (strText.length > size) {
    cutStr.text(strText.slice(0, size) + ' ...');
  }
}

cutStr();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, consequatur. Fuga quasi amet labore, a fugit fugiat quaerat facilis vero dolor nam nisi tempora ipsum, omnis tempore, libero suscipit animi.</a>
    </li>
    <li>
        <a href="">Norm lenght str</a>
    </li>
    <li>
        <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui magnam, assumenda doloribus earum consectetur tenetur aspernatur aperiam sit voluptate. Assumenda corrupti quo, sint ipsam accusamus dolorum eveniet repudiandae nobis! At?</a>
    </li>
    <li>
        <a href="">Norm lenght str</a>
    </li>
    <li>
        <a href="">Norm lenght str</a>
    </li>
</ul>

javascript

2 个回答

  1. Best Answer

    function cutStr() {
  var size = 15,
    cutStr = $('li a');

  cutStr.each(function() { // перебираем все элементы
    var strText = $(this).text();
    if (strText.length > size) {
      $(this).text(strText.slice(0, size) + ' ...'); // подставляем полученный текст только в текущий элемент
    }
  });
}

cutStr();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, consequatur. Fuga quasi amet labore, a fugit fugiat quaerat facilis vero dolor nam nisi tempora ipsum, omnis tempore, libero suscipit animi.</a>
  </li>
  <li>
    <a href="">Norm lenght str</a>
  </li>
  <li>
    <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui magnam, assumenda doloribus earum consectetur tenetur aspernatur aperiam sit voluptate. Assumenda corrupti quo, sint ipsam accusamus dolorum eveniet repudiandae nobis! At?</a>
  </li>
  <li>
    <a href="">Norm lenght str</a>
  </li>
  <li>
    <a href="">Norm lenght str</a>
  </li>
</ul>

    • 7

  2. 在纯js上。在 jq 中，唉，我根本不翻找。 

    var elems = document.querySelectorAll("li > a");
var maxLength = 15;
for(var i = 0; i < elems.length; i++){
  var str = elems[i].innerHTML;
  if(str.length > maxLength){
    elems[i].innerHTML = str.substr(0,maxLength) + "...";
  }
}
    <ul>
    <li>
        <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, consequatur. Fuga quasi amet labore, a fugit fugiat quaerat facilis vero dolor nam nisi tempora ipsum, omnis tempore, libero suscipit animi.</a>
    </li>
    <li>
        <a href="">Norm lenght str</a>
    </li>
    <li>
        <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui magnam, assumenda doloribus earum consectetur tenetur aspernatur aperiam sit voluptate. Assumenda corrupti quo, sint ipsam accusamus dolorum eveniet repudiandae nobis! At?</a>
    </li>
    <li>
        <a href="">Norm lenght str</a>
    </li>
    <li>
        <a href="">Norm lenght str</a>
    </li>
</ul>

    • 6

相关问题