Обрезать текст

@rodiony · Регистрация: 31.05.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте. Есть условие, если ширина двух блоков (.d2 и .d3) будет больше ширины блока .d1 то нужно обрезать текст.
Как обрезать какое-то количество символов я знаю, например

JavaScript
1
$(".d3").text('... ' + $(".d3").text().slice(-5));

и текст обрежется, оставив 4 символа в конце строки
Но нужно обрезать текст в .d3 на столько, чтобы он уместился по всей ширине этого блока и не съезжал на другую строку.
Помогите плиз, как можно это сделать средствами jQuery

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
.wrapper {width:190px;}
.d2 {float:left; padding: 0 10px; background-color:#0F0;}
.d3 {float:left; padding: 0 10px; background-color:#FF0;}
</style>
 
<div class="wrapper"> 
  <div class="d1">
     <div class="d2">>>>></div>
     <div class="d3">Этот текст, увеличил ширину блока и блок съехал на другую строку.</div>
  </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function(){
var d1 = $('.d1').outerWidth(),
    d2 = $('.d2').outerWidth(),
    d3 = $('.d3').outerWidth(),
    d23 = (d2 + d3);
 if(d1 <= d23) {
  // как обрезать текст в начале строки  в .d3 на столько, чтобы он уместился по всей ширине этого блока и не съезжал на другую строку?
 }
});
</script>

@Уф · 31.05.2016, 17:33

пропиши в стайл у д3:
overflow:hidden;
text-overflow: ellipsis;
и браузер будет сам обрезать и троеточие вставлять

Добавлено через 47 секунд
если он должен в одну строку быть добавь еще white-space: nowrap;

@rodiony · 31.05.2016, 21:49 **[ТС]**

Уф, прежде чем обратиться за помощью, я конечно пробовал overflow:hidden; white-space... - див d3, если текст большой, уходит на другую строку... За ответ спасибо. Но без js не обойтись.
В условии if, нужно обрезать текст ровно на столько символов, чтобы суммарная ширина дивов .d2 и .d3 не превысила ширину дива .d1
Как это сделать, я не знаю

@sad67man · 31.05.2016, 21:56

rodiony, Я пользуюсь библиатекой dotdotdot. Он обрезает построчно, удобно когда нужно, чтоб не обрезалось по середине слова.

@rodiony · 31.05.2016, 22:44 **[ТС]**

sad67man, я уже рассматривал эту библиотеку, она не сделает то, о чем я здесь пишу

@sad67man · 31.05.2016, 22:46

rodiony, А что зафиксировать ширину блока, чтоб он не растягивался нельзя?

@rodiony · 31.05.2016, 23:24 **[ТС]**

sad67man, нет, указывать ширину нельзя

@sad67man · 01.06.2016, 00:39

rodiony, Т.е. у вас у d2 ширина неизвестна. и нужно подогнать d3, чтоб d2 и d3 вмещались в d1? Я правильно задачу понимаю? А высота у этих блоков одинаковая? Высота известна?

Добавлено через 1 час 6 минут
rodiony, Я думаю, что эту задачу можно решить через css.
https://jsfiddle.net/oLcybqgj/1/

@rodiony · 01.06.2016, 00:52 **[ТС]**

sad67man,
ширина есть у .wrapper (190px)
у d1 нет float:left и поэтому он также растягивается на 190px
У d2 и d3 явной ширины и высоты нет, ширина будет зависеть от длинны текста
В d2 будет стабильный текст, например Кнопка. А вот в d3 длинна текста будет разная, его и нужно обрезать..
смотрел разные форумы, готовых решений не нашел, но понял что обрезать нужно по одному символу и сравнивать
как-то так:

JavaScript
1
(0, str.length - 1)

Сообщение от sad67man

Я думаю, что эту задачу можно решить через css.

Разметку html я привел условную, для лучшего понимания задачи. Например, .wrapper - это ширина страницы, и делать ее 50% нельзя

@sad67man · 01.06.2016, 01:03

rodiony, 50% я указал для примера, чтоб можно было подергать размер фрейма и посмотреть, как себя ведут блоки. Можете поставить и фиксированную ширину, это ни на что не влияет.
Есть куча способов решения вашей задачи. Но тут все индивидуально, зависит от ситуации. Я привел лишь несколько примеров. И если вы обрезаете текст до одной строчки, значит высота в принципе будет всегда одинаковая, и ее можно указать явно, как во втором примере.

Добавлено через 1 минуту
rodiony, Ну конечно можете и в цикле удалять по символу, но мне не кажется что это оптимальный вариант.

@rodiony · 01.06.2016, 01:29 **[ТС]**

Сообщение от sad67man

rodiony, Ну конечно можете и в цикле удалять по символу

sad67man, я не знаю как, поможете?

@rodiony · 13.06.2016, 14:23 **[ТС]**

Сделал сам. Теперь текст обрезается. Но как мне кажется, текст обрезается медленно. Как оптимизировать код?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
.wrapper {width:190px; height: 50px; border: 1px solid black;}
.d2 {float:left; padding: 0 10px; background-color:#0F0;}
.d3 {float:left; padding: 0 10px; background-color:#FF0;}
</style>
 
<div class="wrapper"> 
  <div class="d1">
     <div class="d2">>>>></div>
     <div class="d3">Этот текст больше ширины дива wrapper и поэтому его нужно обрезать.</div>
  </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
<script>
$(document).ready(function(){
    var nameTrim = $(".d3").outerWidth() - 1;
    for (; $(".d3").outerWidth() >= ($(".d1").outerWidth() - $(".d2").outerWidth()); --nameTrim) {
        $(".d3").text('...' + $(".d3").text().slice(-nameTrim));
    }
});    
</script>

@BANO · 13.06.2016, 14:32

rodiony, можно посчитать разницу в ширине, поделить на среднюю ширину символа и обрезать на полученное количество символов

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	31.05.2016, 17:33
	пропиши в стайл у д3: overflow:hidden; text-overflow: ellipsis; и браузер будет сам обрезать и троеточие вставлять Добавлено через 47 секунд если он должен в одну строку быть добавь еще white-space: nowrap; 0

@rodiony 1 / 1 / 0 Регистрация: 31.05.2016 Сообщений: 15
	31.05.2016, 21:49 [ТС]
	Уф, прежде чем обратиться за помощью, я конечно пробовал overflow:hidden; white-space... - див d3, если текст большой, уходит на другую строку... За ответ спасибо. Но без js не обойтись. В условии if, нужно обрезать текст ровно на столько символов, чтобы суммарная ширина дивов .d2 и .d3 не превысила ширину дива .d1 Как это сделать, я не знаю 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	31.05.2016, 21:56
	rodiony, Я пользуюсь библиатекой dotdotdot. Он обрезает построчно, удобно когда нужно, чтоб не обрезалось по середине слова. 0

@rodiony 1 / 1 / 0 Регистрация: 31.05.2016 Сообщений: 15
	31.05.2016, 22:44 [ТС]
	sad67man, я уже рассматривал эту библиотеку, она не сделает то, о чем я здесь пишу 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	31.05.2016, 22:46
	rodiony, А что зафиксировать ширину блока, чтоб он не растягивался нельзя? 0

@rodiony 1 / 1 / 0 Регистрация: 31.05.2016 Сообщений: 15
	31.05.2016, 23:24 [ТС]
	sad67man, нет, указывать ширину нельзя 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	01.06.2016, 00:39
	rodiony, Т.е. у вас у d2 ширина неизвестна. и нужно подогнать d3, чтоб d2 и d3 вмещались в d1? Я правильно задачу понимаю? А высота у этих блоков одинаковая? Высота известна? Добавлено через 1 час 6 минут rodiony, Я думаю, что эту задачу можно решить через css. https://jsfiddle.net/oLcybqgj/1/ 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	01.06.2016, 01:03
	rodiony, 50% я указал для примера, чтоб можно было подергать размер фрейма и посмотреть, как себя ведут блоки. Можете поставить и фиксированную ширину, это ни на что не влияет. Есть куча способов решения вашей задачи. Но тут все индивидуально, зависит от ситуации. Я привел лишь несколько примеров. И если вы обрезаете текст до одной строчки, значит высота в принципе будет всегда одинаковая, и ее можно указать явно, как во втором примере. Добавлено через 1 минуту rodiony, Ну конечно можете и в цикле удалять по символу, но мне не кажется что это оптимальный вариант. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	13.06.2016, 14:32
	rodiony, можно посчитать разницу в ширине, поделить на среднюю ширину символа и обрезать на полученное количество символов 0