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 that you have read and understand our privacy policy and code of conduct.

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