Materialize: Truncate not working with formatted text (html code)

[adamwox]

I'm making a little blog website and on the index page I have a list of posts but I don't want to see all posts content so I used <p class='truncate'>{{ post.content }}</p> but it's not working.
Is that a bug or just it's not possible to do .truncate with content in basic html code?

[geniuskidkanyi]

i belive in you {{ post.content }} you should pipe it to reveal only amount of word counts.

[adamwox]

So if I understand that correctly... It's making ".truncate" for {{ post.content }} not for string which is behind that syntax as a result?

[acburst]

What our truncate class does is cut content down to one line of text and if there is overflow, represent that overflow with an ellipsis. If the width of your p element is enough to contain all your content in one line it will still show.

Do you have any code examples of where it isn't working?

[adamwox]

It's Phalcon PHP Framework with Volt views:
{% for p in posts %} '<div class="row"> <div> <div class="card white z-depth-2"> <div class="card-content blue-text text-darken-4"> <span class="card-title"><a href="/jade/posts/show/{{p.id}}">{{p.title}}</a></span> <p class="truncate">{{ p.content }}</p> </div> <div class="card-action"> </div> </div> </div> </div> {% endfor %}
And the result
http://www102.zippyshare.com/v/N6xNpdbT/file.html
And source view displays me that:
<p class="truncate"><p>łote obrączki, przysięga przed ołtarzem, zabawa weselna do białego rana.</p></p>
With blockquote, div, pre inside <p class="truncate"> the <p class="truncate"> is removed:
<span class="blue-text text-darken-4"><blockquote>łote obrączki, przysięga przed ołtarzem, zabawa weselna do białego rana.</blockquote></span>
The text editor is tinymce

[adamwox]

Halooo!! Can someone tell if it will be fixed or it's impossible?

[chi-bd]

How about this?

<p class="truncate">{{ p.content|striptags }}</p>

[jpnayak]

don't use truncate, instead you can use native 'text-overflow: ellipsis'.

[cw-devanshverma]

you can refer to this link:
https://codepen.io/j_holtslander/pen/wmgKea

Conclusion:

In order to use truncate class you have to use grid

e.g.

<div class="row">
    <div class="col s4">
        <p class="truncate">This is a fairly long .flow-text title in Materialize framework.</p>
    </div>
</div>