PHP Lang
  1. PHP Lang
  3. Показать текст абзаца с диагональным отступом
Intereting Posts
Перенаправить Symfony2 LogoutSuccessHandler в исходную цель выхода из системы Как узнать, не удалось ли выполнить запрос в Laravel 4? Google App-Gmail Невозможно установить. Gmail, заменяющий адрес при отправке через SMTP-транспорт Swiftmailer (PHP) PHP: имена аргументов функции 1054 – Неизвестный столбец 'apa_calda' в 'where clause' PHP XPath. Преобразование сложных XML в массив API-интерфейс API Карт Google v3 / база данных фильтров Использовать переменную в heredoc в PHP (практика SQL) Проверка синтаксиса PHP в Sublime Text Editor PHP mkdir: проблема с разрешением отказа Простой календарь, похожий на DatePicker DatePicker: невозможно установить свойство «currentDay» неопределенного, когда идентификатор нескольких массивов Выполнение javascript-скрипта после загрузки ajax-страницы – не работает Напишите PHP PDO-запросы как `dbName`.`tableName` в отличие от` tableName` – почему? Функция PHP с дополнительными параметрами

Показать текст абзаца с диагональным отступом

Интересно, есть ли способ показать текст абзаца с диагональным отступом, чтобы быть чем-то вроде этого!

введите описание изображения здесь

Помните, что этот текст написан в редакторе WYSIWYG (содержит теги html).

Я думал, есть ли способ подсчитать слова в абзаце, исключая теги html, а затем сделать некоторые уравнения, чтобы увеличить отступ текста каждой строки jQuery или Javascript.

Есть ли какие-нибудь предложения для этого?

После многих поисковых запросов я нашел что-то полезное http://www.csstextwrap.com/examples.php Я думаю, что после некоторых изменений он будет соответствовать моим требованиям. спасибо за ваши высоко оцененные ответы.

Чтобы подсчитать количество слов в абзаце, исключая теги HTML, используйте: 

$tagless_content=strip_tags($content); str_word_count($tagless_content);

Обновить

Вот код для увеличения текста-отступа через jQuery 

 jQuery.fn.stripTags = function() { return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') ); };

затем используйте свойство JavaScript String.length 

 var len = $('<p>').stripTags().length(); for(var i=0;i<len;i++) jQuery('<p>').css('text-indent',+i+'px');

Справка

  • Стрип-тег через jQuery
  • strip_tag PHP
  • str_word_count Функция PHP

Я не знаю о прямом решении, поскольку, поскольку вы все больше отступаете от каждой строки текста, длина пространства, в котором каждая строка может занять место, будет уменьшаться, создавая новые строки.

Например: 

 TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXT

После отступа: 

 TEXTTEXTTEXTTEXT TEXTTEXTTEXTTEX T TEXTTEXTTEXTTE XT TEXTTEXTTEXTT EXT TEXTTEXTTEXT TEXT

Эта проблема будет существовать, если (1) вы обрабатываете строки, созданные из-за обертывания слов, и (2), если вы сразу обнаруживаете все строки и затем выполняете все свои отступы (в отличие от алгоритма, который обновляет <p> Если семейство шрифтов является шрифтом с монослоем, то это можно настроить.

Наилучшим вариантом является то, что это – -минированные строки, и в этом случае это было бы очень легко.

Чуть сложнее будет делать это с монослоем.

В худшем случае сценарий, описанный выше, потребует поиска первой строки, которая не имеет отступов, затем отстутствует, обновляет текст <p> , а затем повторяет процесс до тех пор, пока текст не будет полностью пройден или если количество отступ превышает ширину <p> .

Я бы предложил снова задать ваш вопрос, указав следующую информацию: – строки заканчиваются тэгами, или они завернуты в слово? Если это слово обернуто, это шрифт с монослоем или переменной шириной?

Вы можете перекосить содержащий div 

 .holder{ transform:skew(-40deg); } <div class="holder"> <span class="rotate">Just </span> <span class="rotate">Like</span> <span class="rotate">This! </span> </div>

а затем развязать каждое слово внутри него. 

 .rotate { transform: skew(40deg); }

https://jsfiddle.net/dcst94sv/5/