Geek Answers Handbook

Show indented paragraph text

I wonder if there is a way to display paragraph text with diagonal indentation to be something like this?

enter image description here

Bearing in mind that this text is written in the WYSIWYG editor (contains html tags).

I was wondering if there is a way to count the words in a paragraph excluding html tags and then make some equations to increase the indentation of the text of each jQuery or Javascript line.

Are there any suggestions for this?

+5
source share
5 answers

, HTML, :

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

Update

jQuery

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

String.length JavaScript

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

+1

, , , , , , , .

:

TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT

:

TEXTTEXTTEXTTEXT
 TEXTTEXTTEXTTEX
T
  TEXTTEXTTEXTTE
XT
   TEXTTEXTTEXTT
EXT
    TEXTTEXTTEXT
TEXT

, (1) , - , (2), , ( , <p> . , .

, <br> - , .

.

, , , , , <p>, , <p>.

, :  - , <br>, ? , ?

0

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/

0

CSS. . li:: before, . li:: before , . .

:

li::before {
    content: "";
    display: block;
    float: left;
    height: 50px;
    width: 10px;
}
<ul>
  <li>sancti et dilecti</li> 
  <li>viscera misericordiae</li>
  <li>benignitatem </li>
  <li>humilitatem</li>
  <li>modestiam</li>
  <li>patientiam</li>
  <li>caritatem</li>
</ul>
Hide result
0

More articles:


All Articles