I wonder if there is a way to display paragraph text with diagonal indent to be some thing like that!

Keeping in mind that this text is written in WYSIWYG editor (Contains html tags).

I was thinking if there is a way to count the words within the paragraph excluding html tags and then making some equations to increase the indent of the text every line by jQuery or Javascript.

Is there any suggestions to do that ?

I wonder if there is a way to display paragraph text with diagonal indent to be some thing like that!

Keeping in mind that this text is written in WYSIWYG editor (Contains html tags).

I was thinking if there is a way to count the words within the paragraph excluding html tags and then making some equations to increase the indent of the text every line by jQuery or Javascript.

Is there any suggestions to do that ?

• php
• javascript
• jquery
• css

• u need same string to be truncated from right or different string?? – xkeshav Commented Mar 10, 2011 at 9:20

5 Answers 5

You can skew the containing div

.holder{
  transform:skew(-40deg);
}

<div class="holder">
    <span class="rotate">Just </span>
    <span class="rotate">Like</span>
    <span class="rotate">This! </span>
</div>

and then unskew each word inside it.

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

https://jsfiddle/dcst94sv/5/

There's a very easy way to do this with CSS. Create a list. Then use li::before to add left-side padding to the list items. Set the li::before element to be a tall and thin block floated to the left. Each one will create left side padding for its parent list item and all those below it.

Like this:

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>

To count the number of words within the paragraph excluding HTML tags, use:

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

Update

Here is code to increase text-indent via jQuery

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

then use the String.length JavaScript property

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

Reference

• Strip tag via jQuery
• strip_tag PHP function
• str_word_count PHP function

There's no straight-forward solution that I am aware of, since, as you indent each line of the text more and more, the length of space that each line can take up will decrease, creating new lines.

For example:

TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT

Post-indentation:

TEXTTEXTTEXTTEXT
 TEXTTEXTTEXTTEX
T
  TEXTTEXTTEXTTE
XT
   TEXTTEXTTEXTT
EXT
    TEXTTEXTTEXT
TEXT

This problem will exist if (1) you are processing lines created due to word wraps, and (2) if you detect all of the lines at once and then do all of your indents (as opposed to an algorithm that updates the <p>'s text. If the font family is mono-spaced font, then this can be adjusted for.

Best-case scenario is that these are <br>-terminated lines, in which case this would be very easy.

Slightly more difficult would be doing this with a mono-spaced font.

Worst-case scenario, describe above, would require searching for the first line that is not indented, then indenting it, updating the <p>'s text, and then repeating the process until the text is pletely gone through or if the amount of indention exceeds with width of the <p>.

I would suggest asking your question again, providing the following information: - are the lines terminated with <br> tags, or are they word-wrapped? If it is word-wrapped, is the font mono-spaced or variable-width?

After many Searching stuff I found something useful http://www.csstextwrap./examples.php I think after some modifications it will fit my requirements. thanks for your highly appreciated Responses.