Как сделать 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 не подключено, то скорее всего вы подключаете ее позже, чем используете.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

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

	Как сделать text-indent с условием для абзацев где больше n символов 28.07.2017, 16:27. Показов 1373. Ответов 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 символов

Решение