Обрезание и разворачивание текста

RK3DNP · April 10, 2015

Добрый вечер, задача такая, в диве есть большой текст, а на странице выводятся только 4 строчки его, как сделать нашел:

http://htmlbook.ru/blog/obrezaem-dlinnuyu-stro

а как еще добавить к этому кнопку развернуть и по которой див будет развернут полностью, с текстом?

RK3DNP · April 15, 2015

Вот еще одно решение, немного по другому

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=koi8-ru" /><script src="https://code.jquery.com/jquery-1.11.2.min.js"></script><script type="text/javascript"> function displ(ddd) {	var el = document.getElementById(ddd);    if (el.className.indexOf('hidden') >= 0) {		el.className = 'text-box';		document.getElementById(ddd + '-link').innerText = 'Скрыть текст';	}    else {		el.className = 'text-box hidden';		document.getElementById(ddd + '-link').innerText = 'Показать текст';	}}</script><style>body {width:200px;}.text-box {	heght: 100%;	width:200px;	float:left;}.text-box.hidden { overflow-y: hidden; height: 200px; }</style></head><body ><div id="var" class="text-box hidden">Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту)Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту) Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту) Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту) Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту)  </div><a id="var-link" href="javascript:displ('var')">Показать текст</a><br/><br/><br/><div id="var1" class="text-box hidden">Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту)Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту) Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту) Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту) Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту)  </div><a id="var1-link" href="javascript:displ('var1')">Показать текст</a></body></html>

rus · April 10, 2015

js-ом

Andryshok · April 10, 2015

Солюшн человек добрый! используй JQuery

$(document).ready(function() {	$('#id кнопки по которой тискаем').click(function(){				$('#id дива который нужно разворачивать').slideToggle(500, function (){ 		}); 	});});

Edited April 10, 2015 by Andryshok

RK3DNP · April 11, 2015

За это спасибо, но у меня будет получается 2 дива, которые частично отображается, а второй который будет разворачиваться? Ведь если будет 1 див, то тогда все скрыто?

Andryshok · April 11, 2015

Так сколько угодно много создавайте дивов, id которого нужно развернуть можно легко узнать программно, это не проблема

RK3DNP · April 11, 2015

On 4/11/2015 at 10:19 AM, Andryshok said:
Так сколько угодно много создавайте дивов, id которого нужно развернуть можно легко узнать программно, это не проблема

id кнопки по которой тискаем - а если у меня в качестве кнопки будет текст, это будет имя дива тогда?

Andryshok · April 12, 2015

без разницы что это, id="ваш id" элемента

RK3DNP · April 13, 2015

Если так, то не работает

<head> <script>$(document).ready(function() {	$('#size1').click(function(){				$('#size').slideToggle(500, function (){ 		}); 	});});	</script></head> <body><div id="size">Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста. Например, это может понадобиться для мобильной версии сайта или для интерфейса, в котором важно число строк. В подобных случаях имеет смысл обрезать длинные строки текста, оставив только начало предложения. Так мы приведём интерфейс к компактному виду и сократим объём выводимой информации. Само обрезание строк можно делать на стороне сервера с помощью того же PHP, но через CSS это проще, к тому же всегда можно показать текст целиком, например, при наведении на него курсора мыши. Далее рассмотрим методы, как текст порезать воображаемыми ножницами.</div><div id="size1">Развернуть</div></body>

RK3DNP · April 13, 2015

В принципе вот рабочий скрипт нашел. А можно ли с помощью css выделить строки у дива начиная с 5 строки и далее? Чтобы display: none относилось только к 5 и далее строке?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><script> function collapsElement(id) { if ( document.getElementById(id).style.display != "none" ) { document.getElementById(id).style.display = 'none'; } else { document.getElementById(id).style.display = ''; } } </script><head></head> <body >  <div>	<div id="identifikator" style="display: none">		<p>Текст текст текст текст</p>	</div>	<a href="javascript:collapsElement('identifikator')" title="" rel="nofollow">Текст ссылки</a></div></body></html>

rus · April 13, 2015

On 4/13/2015 at 6:30 PM, RK3DNP said:
Если так, то не работает

RK3DNP, jquery подключить надо.

RK3DNP · April 13, 2015

Да эту проблему решил, ща вот вопрос, можно ли обойтись одним Div, но чтобы скрыта была только часть текста?

RK3DNP · April 14, 2015

Спасибо, проблема решена

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><script src="/media/jui/js/jquery.min.js" type="text/javascript"></script><script>    var myFlag = true;    $(document).ready(function () {        $(".point2").click(function () {var $speech = $(".point");            if (myFlag) {                $speech.css('overflow-y', 'visible');$speech.css('height', '100%');                myFlag = false;            }            else {                $speech.css('overflow-y', 'hidden');$speech.css('height', '200px');                myFlag = true;            }        });    });</script><head><style>body {width:200px;}.point{overflow-y: hidden;width:200px;height:200px;float:left;}</style></head><body >    <div class="point">33есмотр¤ на то, что мониторы больших диагоналей станов¤тс¤ всЄ доступнее, а их разрешение посто¤нно растЄт, иногда возникает задача в ограниченном пространстве уместить много текста. Ќапример, это может понадобитьс¤ дл¤ мобильной версии сайта или дл¤ интерфейса, в котором важно число строк. ¬ подобных случа¤х имеет смысл обрезать длинные строки текста, оставив только начало предложени¤. “ак мы приведЄм интерфейс к компактному виду и сократим объЄм выводимой информации. —амо обрезание строк можно делать на стороне сервера с помощью того же PHP, но через CSS это проще, к тому же всегда можно показать текст целиком, например, при наведении на него курсора мыши. ƒалее рассмотрим методы, как текст порезать воображаемыми ножниц</div><div class="point2">Текст ссылки</div></body></html>

Edited April 14, 2015 by RK3DNP

Sign In

Обрезание и разворачивание текста

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information