Изменить длину текста OnClick

У меня есть абзац, который ограничен по длине. Когда предел достигнут, в конце сокращенного текста добавляется знак «+».Изменить длину текста OnClick

Я хотел бы сделать это «+» интерактивными так появится остальная часть пункта. Затем, щелкнув по абзацу, текст должен снова сократиться.

Пример:

К настоящему времени я мог только управлять, чтобы ограничить размер текста и добавить «+» в конце.

Код:

var myDiv = $('#trim'); 
 
var myDivlength = myDiv.text().length; 
 

 
if(myDivlength>10){ 
 
    myDiv.text(myDiv.text().substring(0,10)); 
 
    myDiv.append(" ..." + '+'); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 

 
    <body> 
 

 

 
    <p id="trim">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. 
 
    </p> 
 

 

 

 

 
</body>

источник

2016-04-01 michltm

Ваш код выбрасывая ничего после 10 символов, так как вы предлагаете, чтобы получить его обратно? –

Вместо того, чтобы обрезать текст, вы можете просто создать div с фиксированной шириной и поместить его в это. Затем, щелкнув +, вы можете развернуть div. ИЛИ Вы можете просто загрузить дополнительный текст через ajax, заменив усеченный текст. – timgavin

Вы можете достичь всего необходимого поведения с помощью CSS, используя no-wrap, text-overflow и псевдо элемент для + характера :after. Затем вам просто нужно переключить класс в обработчике JS click. Попробуйте это:

$('#trim').click(function() { 
 
    $(this).toggleClass('full'); 
 
});

#trim { 
 
    text-overflow: ellipsis; 
 
    width: 400px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    display: inline-block; 
 
    padding-right: 20px; 
 
} 
 
#trim:after { 
 
    content: '+'; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 
#trim.full { 
 
    width: auto; 
 
    height: auto; 
 
    white-space: normal; 
 
} 
 
#trim.full:after { 
 
    display: none; 
 
}

<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<p id="trim"> 
 
    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. 
 
</p>

источник

2016-04-01 15:50:14

Thx вы за свою помощь, поведение действительно здорово. Только одно: дало бы способ показать знак «+», если ширина текста меньше 400 пикселей, определенная в #trim? – michltm

-1

<div id='more'>+</div>

$('#more').click(function({ 
    $('#trim').text(); 
}));

источник

2016-04-01 15:48:11

Я не уверен, что вы ожидаете от этого, но я уверен, что это не так. –

Я показывал весь contect на знак плюса. –

Все это делает использование getter метода 'text()', фактически не присваивая его чему-либо –

Эй, вы можете использовать CSS для этого с фиксированной шириной и следующие атрибуты:

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;

Вы можете иметь что-то подобное в вашем CSS

.mytext { 
    width: 200px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.mytext.expanded { 
    overflow: visible 
}

этот кусок html в ваш шаблон

<p id="trim" class="mytext">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. 
    </p> <div id='expand'>+</div>

и в ЯШ:

$('#expand').click(function({ 
    $('#trim').toggleClass('expanded'); 
}));

источник

2016-04-01 15:51:39 deKajoo

Обратите внимание, что для работы «text-overflow: ellipsis» для работы элемент должен иметь фиксированный размер. –

Изменить длину текста OnClick

ответ

Смежные вопросы