Javascript 物化截断不在卡片上工作

我一直在我的卡片上使用Materialize，希望标题被截断

我试图使用materialize网站上的简单代码示例，但它不起作用。以下是我的例子：

<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>

...
{{house.address}

---

我还使用他们网站上的min.css和js库。这看起来很简单，但是如果文本太长，卡片就会拉伸。如果您有任何想法，请告诉我，谢谢。

我不确定您的代码中到底哪里有问题，所以我猜：

我想这张卡片被拉伸了，因为这一部分的文字太长了：

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

因为

span

是一个vs

div

，它是一个

内联元素不从新行开始，只作为 根据需要增加宽度

vs

块级元素始终从新行开始并占用 全宽可用（尽可能向左和向右延伸 可以）

---

必要与可用：D

一般来说，在示例中包含JSFIDLE代码始终是一个好的实践。理想情况下，也可以是预期结果的模型。不完整的代码使我们更难检查。

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