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

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

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

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

Решение