Как сделать text-indent с условием для абзацев где больше n символов

@exepr0gaming · Регистрация: 20.09.2015

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

Ну вроде из заголовка всё понятно, может на php можно это как то не сложно реализовать, в sass и less говорят можно, а на простом css мол нет.
Т.е. условие для всех '<p>' на сайте, если абзац к примеру 2 строчки там (n символов), то text-indent:0, если там 3 строчки (n+ символов), то отступ 25px к примеру.
Гугл что то не помог, может тут кто сталкивался, заранее спасибо.

Qwerty_Wasd · 28.07.2017, 21:25

exepr0gaming, как пример

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html lang="ru">
<head>
<meta charset="utf-8" />
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>
    window.onload=function(){
var str=$('p').text();
var dot=str.split('.').length-1;
if (dot<2) $('p').css('text-indent','0'); else $('p').css('text-indent','25px');}
</script>
</head>
<body>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus ligula justo, ut interdum nisi egestas ut. Donec ut augue sit amet velit consequat ultricies. Quisque orci ex, laoreet condimentum blandit semper, sagittis sed lorem. Pellentesque volutpat mi eu diam accumsan, vel tincidunt lacus faucibus. Vivamus scelerisque, magna sed dapibus dictum, orci massa fermentum augue, in faucibus augue nibh id lorem. Vestibulum a leo ut purus scelerisque tempus. Aliquam erat volutpat. Maecenas pellentesque, sapien tincidunt eleifend posuere, enim dui accumsan ex, aliquet commodo diam massa tempus ipsum. Nulla nisl quam, pellentesque quis dolor at, auctor vulputate risus. Suspendisse vel nulla ac tellus pretium bibendum. Phasellus eget nunc vel est egestas congue vel vitae nibh. Proin sed nisi nec nisi iaculis ultrices.</p>
</body>
</html>

Добавлено через 11 минут
Но учитывая тенденцию форума, конкретно под ваше условие

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>
    window.onload=function(){
var n=50,// кол-во символов
str=$('p').text(), length=str.length;
if(length<n)
$('p').css('text-indent','0'); else $('p').css('text-indent','25px');}
</script>
</head>
<body>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus ligula justo, ut interdum nisi egestas ut. Donec ut augue sit amet velit consequat ultricies. Quisque orci ex, laoreet condimentum blandit semper, sagittis sed lorem. Pellentesque volutpat mi eu diam accumsan, vel tincidunt lacus faucibus. Vivamus scelerisque, magna sed dapibus dictum, orci massa fermentum augue, in faucibus augue nibh id lorem. Vestibulum a leo ut purus scelerisque tempus. Aliquam erat volutpat. Maecenas pellentesque, sapien tincidunt eleifend posuere, enim dui accumsan ex, aliquet commodo diam massa tempus ipsum. Nulla nisl quam, pellentesque quis dolor at, auctor vulputate risus. Suspendisse vel nulla ac tellus pretium bibendum. Phasellus eget nunc vel est egestas congue vel vitae nibh. Proin sed nisi nec nisi iaculis ultrices.</p>
</body>
</html>

@exepr0gaming · 29.07.2017, 08:01 **[ТС]**

Qwerty_Wasd,

@UseMuse · 29.07.2017, 17:52

Qwerty_Wasd, Помоги пожалуйста)
у меня два тега p, в одном теге мало символов, в другом больше
Нужно чтобы для первого тега выравнивание было по центру
а для второго, где символов больше, по ширине

https://codepen.io/anon/pen/WErwJJ

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
27
28
29
30
31
32
33
34
35
36
<html lang="ru">
 
<head>
  <meta charset="utf-8" />
</head>
 
<body>
  <div class=div_block>
    <div>
      <div>
        <div>
          <div>
            <div>
              <p><img src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br> короткий текст</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <div class=div_block>
    <div>
      <div>
        <div>
          <div>
            <div>
              <p><img src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br> Длииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииныыыыыыыыыыыыыыыыыый текст</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
 .div_block p {
    text-align: justify;
  }
  p img {
    display: block;
    margin: 0 auto;
  }

JavaScript
1
2
3
4
5
6
window.onload=function(){
var n=50,// кол-во символов
str=$('.div_block p').text(), length=str.length;
if(length<n)
$('.div_block p').css('text-align','center'); 
else $('.div_block p').css('text-align','justify');}

Qwerty_Wasd · 29.07.2017, 20:37

UseMuse, Первое что вам надо было сделать - поставить кавычки при указании класса, а именно

HTML5
1
<div class="div_block">

Второе, используя CodePen, правильно подгрузить библиотеку JQuery. Ссылка, что вы подключили битая, сервис ругается. Ну и третье, в вашем случае нужно просто получить массив из всех

Code
1
<p>

, а дальше перебрать с условием. Вашу разметку со стилями я сохранил.
Хотя ума не приложу, зачем такую вложенность делать.... и img в инлайновом контейнере... Вам виднее.CodePen

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
27
28
29
<div class="div_block">
  <div>
  <div>
  <div>
  <div>
<div>
       <p><img  src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br>
короткий текст</p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
  
  <div class="div_block">
  <div>
  <div>
  <div>
  <div>
<div>
       <p><img  src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br>
Длииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииныыыыыыыыыыыыыыыыыый текст</p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>

CSS
1
2
3
4
5
6
7
 .ads_example_block p {
    text-align: justify;
  }
  p img {
    display: block;
    margin: 0 auto;
  }

JavaScript
1
2
3
window.onload=function(){
var n=50,str = $('.div_block p');
str.each(function() {if($(this).text().length<n) $(this).css('text-align','center');else $(this).css('text-align','justify');});}

@UseMuse · 29.07.2017, 21:43

Qwerty_Wasd, а какую библиотеку нужно подключить, чтобы скрипт заработал? у меня он не выполняется

Qwerty_Wasd · 29.07.2017, 21:52

UseMuse, Jquery.

PHP/HTML
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>
window.onload=function(){
var n=50,str = $('.div_block p');
str.each(function() {if($(this).text().length<n) $(this).css('text-align','center');else $(this).css('text-align','justify');});}
</script>
</head>
<body>
  <div class="div_block">
  <div>
  <div>
  <div>
  <div>
<div>
       <p><img  src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br>
короткий текст</p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
 
  <div class="div_block">
  <div>
  <div>
  <div>
  <div>
<div>
       <p><img  src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br>
Длииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииныыыыыыыыыыыыыыыыыый текст</p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
</body>
</html>

Qwerty_Wasd · 29.07.2017, 21:55

Пруф

@UseMuse · 29.07.2017, 22:25

Qwerty_Wasd, понял почему не работало...
за место символа $, дописал jQuery. И только тогда заработало. Помеху об этом увидел в консоли браузера и нагуглил решение. Мой конечный вариант:

JavaScript
1
2
3
window.onload=function(){
var n=50,str = jQuery('.div_block p');
str.each(function() {if(jQuery(this).text().length<n) jQuery(this).css('text-align','center');else jQuery(this).css('text-align','justify');});}

Qwerty_Wasd · 29.07.2017, 22:42

UseMuse, и так и так можно, разницы нет. Используете в проекте скрипты PHP?

Добавлено через 3 минуты
Вот вам статейка интересная. ->ТЫК<- почитайте не поленитесь. Удачи.

Добавлено через 2 минуты
Если ничего кроме JQuery не подключено, то скорее всего вы подключаете ее позже, чем используете.

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@exepr0gaming 0 / 0 / 0 Регистрация: 20.09.2015 Сообщений: 14

	Как сделать text-indent с условием для абзацев где больше n символов 28.07.2017, 16:27. Показов 1400. Ответов 9 Метки нет (Все метки) Ну вроде из заголовка всё понятно, может на php можно это как то не сложно реализовать, в sass и less говорят можно, а на простом css мол нет. Т.е. условие для всех '<p>' на сайте, если абзац к примеру 2 строчки там (n символов), то text-indent:0, если там 3 строчки (n+ символов), то отступ 25px к примеру. Гугл что то не помог, может тут кто сталкивался, заранее спасибо. 0

@exepr0gaming 0 / 0 / 0 Регистрация: 20.09.2015 Сообщений: 14
	29.07.2017, 08:01 [ТС]
	Qwerty_Wasd, 0

@UseMuse 154 / 154 / 60 Регистрация: 11.01.2016 Сообщений: 1,325
	29.07.2017, 21:43
	Qwerty_Wasd, а какую библиотеку нужно подключить, чтобы скрипт заработал? у меня он не выполняется 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	29.07.2017, 21:55
	Пруф Миниатюры 1

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	29.07.2017, 22:42
	UseMuse, и так и так можно, разницы нет. Используете в проекте скрипты PHP? Добавлено через 3 минуты Вот вам статейка интересная. ->ТЫК<- почитайте не поленитесь. Удачи. Добавлено через 2 минуты Если ничего кроме JQuery не подключено, то скорее всего вы подключаете ее позже, чем используете. 0

Как сделать text-indent с условием для абзацев где больше n символов

Решение