时间戳

首页 > 解决方案 > 物化截断不适用于卡片

javascript - 物化截断不适用于卡片

问题描述

我一直在我的卡片上使用 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 库。看起来很简单，但是如果文本太长，卡片就会拉伸。如果您有任何想法，请告诉我，谢谢。

标签： javascripthtmlcssmaterialize

解决方案

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

我认为由于本节中的文本太长，卡片正在拉伸：

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

因为spanis an inline element vs divwhich is a block element。

内联元素不会从新行开始，只占用必要的宽度。

对比

块级元素总是从新行开始并占据可用的全部宽度（尽可能向左和向右伸展）。

必要与可用：D

推荐阅读