отображать текст только в 1 строку, не прерывая слова, и заканчиваться эллипсами - PullRequest
Новая
       0

отображать текст только в 1 строку, не прерывая слова, и заканчиваться эллипсами

2 голосов
/ 09 марта 2020

РЕДАКТИРОВАТЬ: Изменены эллипсы на эллипс , как указано. И общее мнение заключается в том, что мне нужно будет использовать js для того же. Спасибо.

ОРИГИНАЛЬНЫЙ ВОПРОС: Я пытаюсь отобразить карточку, которая показывает только одну строку описания и оканчивает строку эллипсами. При нажатии, все описание должно быть доступно. Я смог отобразить только 1 строку, указав 

overflow:hidden; 
whitespace:nowrap;
text-overflow:ellipsis;

, но это обрезает последнее слово. Можно ли отобразить только одну строку, не разбивая слово?

Вот ссылка на мой кодовый блок: https://codepen.io/npnair/pen/BaNmXyM?editors=1100

Вот это html: 

<div class="search-card">
    <img class="search-card-img-left"
        src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg">
    <div class="search-card-body">
        <h2 class="search-card-title"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>
        <p class="search-desc"> President has full faith and confidence in his hand-picked AG- and something else to test the overflow property of the description.and something else to test the overflow property of the description. and something else to test the overflow property of the description.</p>
    </div>
</div>

Вот css: 

.search-card {
    width: 800px;
    background-color: lightgray;
    border: 1px solid #888888;
    border-radius: 0.25rem;
    height: 120px;
}

.search-card-img-left {
    padding:20px;
    height:80px;
    width: 80px;
    border:1px solid;
    float:left;
}
.search-card-title {
    margin: 0.25rem;
    border: 1px solid;
    text-align:left;
}

.search-card-body {
    text-align:left;
    display:inline;
}

.search-desc{
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    display:inline;
    word-break: keep-all;
}

Ответы [ 2 ]

1 голос
/ 09 марта 2020

вам нужно иметь дело с плавающим элементом и хранить другие элементы как block, а не inline поля. overflow:hidden и white-space:nowrap также требуется. и последнее, но первое, text-overflow:ellipses не существует, но text-overflow:ellipsis существует.

ваш код исправлен: 

.search-card {
  width: 800px;
  background-color: lightgray;
  border: 1px solid #888888;
  border-radius: 0.25rem;
  height: 120px;
}

.search-card-img-left {
  padding: 20px;
  height: 80px;
  width: 80px;
  border: 1px solid;
  float: left;
}

.search-card-title {
  margin: 0.25rem;
  border: 1px solid;
  text-align: left;
}

.search-card-body {
  text-align: left;
  overflow: hidden;/* clears from float */
}

.search-desc {
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  white-space: nowrap;
  word-break: keep-all;
  width: 100%;
  overflow: hidden;
}
<div class="search-card">
  <img class="search-card-img-left" src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg">
  <div class="search-card-body">
    <h2 class="search-card-title"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>
    <p class="search-desc"> President has full faith and confidence in his hand-picked AG- and something else to test the overflow property of the description.and something else to test the overflow property of the description. and something else to test the overflow property
      of the description.</p>
  </div>
</div>

, если также необходимо отключить search-card-title, добавьте его в селектор search-desc: .search-desc, .search-card-title {/* ... text-overflow ... */}

0 голосов
/ 09 марта 2020

Создайте новый стиль для .truncate класса в вашем файле стиля и добавьте в него любой текстовый контейнер 

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Для заголовка 

<h2 class="search-card-title truncate"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>

Для описания

Просто добавьте этот truncate класс, он будет работать так же, как и заголовок. 

<p class="search-desc truncate">....</p>

Вы должны удалить свойство display:inline из search-desc class.

...