3

Здравствуйте. Есть Список. Если в пункте списка больше определенного количества символов – то эти символы должны обрезаться и вставляться три точки в конце. Сейчас, если хоть в одном пункте, символов больше чем нужно то строка обрезается во всех пунктах и копируется во все пункты. А так, не должно быть. Подскажите как сделать чтоб строка обрезалась только в том пункте, где количество символов превышает допустимое Свойство СSS 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>

2 ответа 2

7

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>

6

На чистом 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.