Обрезания текста

@Tregan · Регистрация: 25.07.2010

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

Добрый день столкнулся с такой проблемой. Не знаю как это сделать может поможете.

Дан блок блоку дан фиксированный размер. в этом блоке идет текст. в блоке вмешается например 50символов текста. сам вопрос как сделать так чтобы текст который бы превышал 50символов. не начил расширять сам блок или переносить на другую строку текст.

Гдето видел что решили эту проблему с помощью троеточием. тоесть идет текст и доходя до границы блока начинает отображаться троеточием тем самым говоря что есть продолжения текста. как это можно воплотить в жизнь с помощью css. Или както по дргому?.

Если можно по конкретний расписать код ато не сильно понимаю как обротится именно к определенному <p> в html коде. За рания спасибо.

HTML5
1
2
3
<html>
<P>тЕКС ТЕКС тЕКС ТЕКС тЕКС ТЕКС тЕКС ТЕКС </P>
</html>

За рание спасибо.

@GalaX · 25.07.2010, 18:35

HTML5
1
2
3
4
5
<p id="idtext">flsdakjf ewjaoifjals joaiwejfoa wjf aiwe oifjawoei jfaiwej aifj eoifjawe ofjiowea joiweaj oiawj oiewaj </p>
<script type="text/javascript">
var a = document.getElementById('idtext');
if (a && a.innerHTML.length > 50) a.innerHTML = a.innerHTML.substr(0, 50) + '...';
</script>

Vovan-VE · 25.07.2010, 18:37

У меня в Опере и FF работает отлично, а IE7 выдает какой-то новый, неизвестный мне доселе косяк.

@Tregan · 25.07.2010, 18:40 **[ТС]**

Извиняюсь проблема была у меня.
Получилось что имя переменной 'idtext' присвоил как самому блоку так и самому вложенному в блок тегу <p>.
Спасибо большое очень сильно помогли.

Vovan-VE · 25.07.2010, 18:49

А для меня осталось загадкой, что происходит в IE7 и IE6

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
    </style>
    <script type="text/javascript"><!--
function docload() {
    var a = document.getElementById('idtext'), s;
    if (a) {
        s = a.innerHTML;
        alert([1,s]); // 1,----+----1----+
        s = s.substr(0, 7);
        alert([2,s]); // 2,----+--
        s += '...';
        alert([3,s]); // 3,...
    };
};
//--></script>
</head>
<body onload="docload()">
 
<p id="idtext">----+----1----+</p>
 
</body>
</html>

Волосы дыбом О_о Если прямо написать

JavaScript
1
s = s.substr(0, 7) + '...';

то ошибка синтаксиса, и весь <script> вообще даже не выполняется.

@Tregan · 25.07.2010, 19:00 **[ТС]**

Так что в ie6 and ie7 не работает ?:О_о.:ireful

Vovan-VE · 25.07.2010, 19:05

Не по теме:

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

Так что в ie6 and ie7 не работает ?

Их обоих под гильотину ]:->

@Tregan · 25.07.2010, 19:52 **[ТС]**

хм... странно у себя проверил у меня отображает так жить как и в FF. идет текс и прирывается ...

Добавлено через 41 минуту
А исче вопрос как зделать тоже самое только чтобы после 50 символов ставился пробел?

@рони · 25.07.2010, 23:45

Vovan-VE,
можно так чтоб ие не ругался

JavaScript
1
s = [s.substr(0,7),'...'].join('');

@Tregan · 26.07.2010, 16:00 **[ТС]**

Vovan-VE,

А можеш уточнить, как сделать чтобы это правило можно было-бы присвоить n-количество блоков. А то пробую работает только с тем блоком который стоит выше остальных. За рание спасибо

Vovan-VE · 26.07.2010, 16:10

Tregan, Данные на странице откуда берутся? Если обычный статический HTML, то лучше использовать jQuery. В противном случае (PHP, например) надо сразу обрезанные данные выводить в браузер.

Добавлено через 1 минуту

Не по теме:

рони, С join() отлично работает. Но вопрос о причине такого поведения остается открытым.

@Tregan · 26.07.2010, 16:30 **[ТС]**

Да обычная верстка Html. Хм а тогда возможно в java задавать правило сразу Определенному блоку. А не приписывать имя к блокам. Например У меня идут подрят 10 блоков с общим Названиям (name-tovara)
но в кажддом из них разный текст. Но мне нужно чтобы обрезания текста работала на всех блоках. Как посоветуете это реализовать?

HTML5
1
2
3
4
<div class="name-tovara"><a href="#">АААААААААА</a></div>
<div class="name-tovara"><a href="#">БББББББББББ</a></div>
<div class="name-tovara"><a href="#">ВВВВВВВВВВВ</a></div>
......................

Vovan-VE · 26.07.2010, 16:38

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

Как посоветуете это реализовать?

Честное слово, не от лени, а потому что так проще: см. пост #2

@Tregan · 26.07.2010, 16:48 **[ТС]**

Спасибо конечно, но мне в любом случаи надо чтобы ставились эти три точки. Кросбраузерность тоже должна быть, так требуют. А с джава вобще не знаком.
Спасибо что помогли!

Vovan-VE · 26.07.2010, 17:07

Вот еще такой вариант с CSS:

HTML5
1
<p class="ellipsis"><span class="d"></span><span>----+----1----+----2----+----3----+----4----+----5----+----6</span></p>

CSS
1
2
p.ellipsis {white-space:nowrap; width:100px; overflow:hidden; position:relative; border:#ccc solid 1px;}
p.ellipsis .d {position:absolute; width:20px; top:0; right:0; bottom:0; background:url('ellipsis.png') repeat-y;}

В конце вместо многоточия полупрозрачный градиент.
Получается Название: result.png
Просмотров: 206

Размер: 472 байт

@Tregan · 26.07.2010, 17:16 **[ТС]**

О вобще класс. то что надо) спасибо

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 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. Задача №1: при указании работ (справочник РаботыПоРемонтуСпецтехники),. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	25.07.2010, 18:37
	У меня в Опере и FF работает отлично, а IE7 выдает какой-то новый, неизвестный мне доселе косяк. 1

@Tregan 0 / 0 / 0 Регистрация: 25.07.2010 Сообщений: 18
	25.07.2010, 18:40 [ТС]
	Извиняюсь проблема была у меня. Получилось что имя переменной 'idtext' присвоил как самому блоку так и самому вложенному в блок тегу <p>. Спасибо большое очень сильно помогли. 0

@Tregan 0 / 0 / 0 Регистрация: 25.07.2010 Сообщений: 18
	25.07.2010, 19:00 [ТС]
	Так что в ie6 and ie7 не работает ?:О_о.:ireful 0

@Tregan 0 / 0 / 0 Регистрация: 25.07.2010 Сообщений: 18
	25.07.2010, 19:52 [ТС]
	хм... странно у себя проверил у меня отображает так жить как и в FF. идет текс и прирывается ... Добавлено через 41 минуту А исче вопрос как зделать тоже самое только чтобы после 50 символов ставился пробел? 0

@Tregan 0 / 0 / 0 Регистрация: 25.07.2010 Сообщений: 18
	26.07.2010, 16:00 [ТС]
	Vovan-VE, А можеш уточнить, как сделать чтобы это правило можно было-бы присвоить n-количество блоков. А то пробую работает только с тем блоком который стоит выше остальных. За рание спасибо 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	26.07.2010, 16:10
	Tregan, Данные на странице откуда берутся? Если обычный статический HTML, то лучше использовать jQuery. В противном случае (PHP, например) надо сразу обрезанные данные выводить в браузер. Добавлено через 1 минуту Не по теме: рони, С join() отлично работает. Но вопрос о причине такого поведения остается открытым. 0

@Tregan 0 / 0 / 0 Регистрация: 25.07.2010 Сообщений: 18
	26.07.2010, 16:48 [ТС]
	Спасибо конечно, но мне в любом случаи надо чтобы ставились эти три точки. Кросбраузерность тоже должна быть, так требуют. А с джава вобще не знаком. Спасибо что помогли! 0

@Tregan 0 / 0 / 0 Регистрация: 25.07.2010 Сообщений: 18
	26.07.2010, 17:16 [ТС]
	О вобще класс. то что надо) спасибо 0