Materialise 截断不适用于卡片

Question

我一直在我的卡片上使用 Materialise 并希望标题被截断。

我尝试使用 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>

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

Answer 1

我不确定你的代码中到底哪里出了问题，所以我猜测：

我猜卡片是因为这部分的文字太长而被拉伸了：

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

我会用 div 元素替换 span 元素，如下所示：

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

因为 span 是一个 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.

对

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

必要与可用 :D

Materialise 截断不适用于卡片

Materialize truncate not working on cards

html

javascript

css

materialize