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>

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

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

因为span是inline element与div的{{3}}。

内联元素不会在新行上启动，只会占用必要的宽度。

VS

块级元素始终在新行上开始并占用全宽可用（向左和向右延伸直至它能）。

必要与可用：D

物化截断不在牌

1 个答案: