Jump to content
  • 0

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


RK3DNP
 Share

Question

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

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

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

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

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

$(document).ready(function() {	$('#id кнопки по которой тискаем').click(function(){				$('#id дива который нужно разворачивать').slideToggle(500, function (){ 		}); 	});});	
Edited by Andryshok
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

 

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

Link to comment
Share on other sites

  • 0

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

<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>
Link to comment
Share on other sites

  • 0

В принципе вот рабочий скрипт нашел. А можно ли с помощью 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>
Link to comment
Share on other sites

  • 0

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

<!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 by RK3DNP
Link to comment
Share on other sites

  • 0

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

<!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>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy