Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.05.2016, 15:49
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Обрезать текст по условию
Здравствуйте
Если див с классом c_name будет по ширине больше дива с классом c_wrap, то по условию текст обрезается, оставляя последние 10 символов
Пожалуйста, подскажите, как обрезать текст ровно на столько символов, чтобы ширина дива .c_name не превысила ширину .c_wrap

(white-space:nowrap;overflow.... мне не подойдет)
<div id="page_site" style="width: 300px;"> <!-- ширина страницы сайта -->
	<div class="c_wrap" style="border: 1px solid #E6E6E6; height: 20px;">
		<div class="c_name" style="float: left;">
		1234567890абвгдежзик1234567890лмнопрст1234567890
		</div>
	</div>
</div>

<script>
$(document).ready(function(){
 wrp = $('.c_wrap').outerWidth();
 nam = $('.c_name').outerWidth();
 if(wrp <= nam) {
  $(".c_name").text('... ' + $(".c_name").text().slice(-10));
 }
});
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 29.05.2016, 18:33
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

sashgera, отрезать например по одному символу и снова сравнивать) пока не станет меньше.
Ответить с цитированием
  #3 (permalink)  
Старый 29.05.2016, 19:13
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

sashgera,
https://jsfiddle.net/2mdv5rkp/13/
Ответить с цитированием
  #4 (permalink)  
Старый 29.05.2016, 19:34
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

DynkanMaclaud, спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 29.05.2016, 20:23
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

DynkanMaclaud, можно делением на пополам еще сделать, меньше итераций я так думаю получится, а может и нет
Ответить с цитированием
  #6 (permalink)  
Старый 30.05.2016, 13:43
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

DynkanMaclaud, подскажите пожалуйста, как в вашем примере, обрезать текст с начала (сейчас текст обрезается с конца) и как перед обрезанным текстом показать троеточие '...'
Ответить с цитированием
  #7 (permalink)  
Старый 30.05.2016, 13:56
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

sashgera,
https://jsfiddle.net/2mdv5rkp/15/
Но с ... ширина будет больше 300 (в данном примере) или надо чтобы была меньше с ... ?
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2016, 14:17
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

DynkanMaclaud, спасибо!
Ответить с цитированием
  #9 (permalink)  
Старый 30.05.2016, 14:27
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

DynkanMaclaud, только что заметил, обрезанный текст с троеточием не умещается в диве
Ответить с цитированием
  #10 (permalink)  
Старый 30.05.2016, 14:44
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

sashgera,
https://jsfiddle.net/oj7d7k0b/
особо не тестил если что пиши...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03