Как обрезать текст внутри блока сетки, который не подходит - PullRequest
Новая
       6

Как обрезать текст внутри блока сетки, который не подходит

1 голос
/ 02 апреля 2020

У меня есть простой пример кода. Html: 

<div class="container">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png">
  </div>
  <div>
    <p>Lorem ipsum</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Css: 

.container {
  display: grid;
  outline: 1px solid;
  grid-template-columns: 80px auto;
  grid-template-rows: 80px;
}

img {
  height: 80px;
}

.text {
  overflow: hidden;
}

ЭТО: https://jsfiddle.net/6f7yukho/
Когда я уменьшаю размер браузера, я видим, что блок контейнера растет, а текст не обрезается. Текст не должен быть перемещен в другую строку, но должен быть обрезан, как это можно сделать?

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

Вот что вам нужно:

используйте white-space: nowrap; в своем контенте, а код, который вы использовали overflow:hidden;, позаботится обо всем остальном.

здесь - скрипка 

.container {
  display: grid;
  outline: 1px solid;
  grid-template-columns: 80px auto;
  grid-template-rows: 80px;
 
}

img {
  height: 80px;
}
#hideText{
   overflow: hidden;
   white-space: nowrap;
}
<div class="container">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png">
  </div>
  <div id="hideText">
    <p>Lorem ipsum</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
0 голосов
/ 02 апреля 2020

Переместить текстовый класс вверх в блок, содержащий оба тега p: 

.container {
  display: grid;
  outline: 1px solid;
  grid-template-columns: 80px auto;
  grid-template-rows: 80px;
}

img {
  height: 80px;
}

.text {
  overflow: hidden;
}
<div class="container">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png">
  </div>
  <div class="text">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
...