Materialize truncate not working on cards

Question

I've been using Materialize on my cards and want the titles to truncate.

I tried to use the simple code example materialize has on their website but it won't work. Here is my example:

<div class="card hoverable waves-effect waves-light">
    <div class="card-image" id="house-pic" style="height: auto;">
    ...
    </div>
    <div class="card-content" style="padding-left: 0px; padding-right: 0px;">
        <span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
    </div>
<div>

I also use the min.css and js libraries on their website. It seems simple enough, but the cards just stretch if the text is too long. Please let me know if you have any ideas, thanks.

Answer 1

I'm not sure where exactly in your code is the problem so I'm guessing:

I supposed the card is stretching because of the text being too long in this section:

<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>

I would replace span element with a div element like so:

<div class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</div>

Because span is an inline element vs div which is a block element.

An inline element does not start on a new line and only takes up as much width as necessary.

vs

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Necessary vs available :D