Материализация усечения не работает на картах - PullRequest
Новая
       6

Материализация усечения не работает на картах

0 голосов
/ 22 мая 2018

Я использую Materialise на своих карточках и хочу, чтобы заголовки усекались.

Я пытался использовать простой пример кода, который материализуется на их веб-сайте, но он не будет работать.Вот мой пример: 

<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 на их веб-сайте.Это кажется достаточно простым, но карты просто растягиваются, если текст слишком длинный.Пожалуйста, дайте мне знать, если у вас есть идеи, спасибо.

1 Ответ

0 голосов
/ 22 мая 2018

Я не уверен, где именно в вашем коде проблема, поэтому я предполагаю:

Я предположил, что карта растягивается из-за слишком длинного текста в этом разделе: 

<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 является встроенным элементом против div, который является блочный элемент .

Встроенный элемент не начинается с новой строки и занимает столько ширины, сколько необходимо.

против

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

Необходимпротив доступны: D

...