Как использовать многоточие для переполнения текста по высоте карточки - PullRequest
Новая
       18

Как использовать многоточие для переполнения текста по высоте карточки

0 голосов
/ 08 июля 2020

Я пытаюсь подогнать текст по высоте этой карточки и скрыть переполнение с помощью многоточия, как вы можете видеть, если я использую пробел: без переноса, он работает, но делает мой блок текста одной строкой. Если я использую "нормальный", я верну свой блок, но многоточие исчезнет ... Как я могу этого добиться? 

<vx-card >
    <template slot="actions">
      <span class="text-grey">{{Time | moment("MM/D/YYYY, h:mm:ss a")}} 
      </span>
    </template>
      <p class="myoverflow" >{{PostContent}}</p>
        <div slot="footer">
          <vs-row vs-justify="flex-end">
            <vs-button color="primary" type="gradient" >View</vs-button>
            <vs-button color="danger" type="gradient" >Delete</vs-button>
          </vs-row>
        </div>
  </vx-card>

css: 

.myoverflow{
  text-overflow: ellipsis;
  height: 100px;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

enter image description here

.myoverflow{
  text-overflow: ellipsis;
  height: 100px;
  width: 100%;
  display: block;
  white-space: normal;
  overflow: hidden;
}

введите описание изображения здесь

1 Ответ

0 голосов
/ 08 июля 2020

это должно решить вашу проблему: 

.myoverflow{
 -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

jsfiddle прилагается:

https://jsfiddle.net/3d6fhrcL/

...