| Kosten | Воскресенье, 01 Июля 2018, 19:36 | Сообщение 1 |
| Переполнение с текстом всегда является большой проблемой, особенно в программной среде. В этом пространстве всегда есть только столько места, сколько переменный контент. Очевидным решением было добавить overflow: hidden настройку к ячейкам таблицы, но даже тогда текст выглядел неестественно отрезанным. Способ сделать переполнение текста элегантным - это эллипсы и свойство text-overflow CSS.
Реализация динамических эллипсов для контента - это простой, тонкий и эффективный способ элегантного управления контентом в ограниченном пространстве. За исключением Firefox, переполнение текста: эллипсис поддерживается основными поставщиками браузеров. Реализация стабильна и эффективна, но может замедлить работу страницы, если на странице много эллипсированных элементов.
Если вы использовали hashnode на телефоне, вы бы знали, что hashnode имеет очень гибкий интерфейс, который приспосабливается к любым размерам экрана, все еще смотря под контролем и красивым.
Скажем, у вас мало ящиков в сетке с некоторым текстом внутри них и говорят, что количество текста является переменным, поэтому высота блоков неравномерна.
Что-то вроде этого:
Хотя в CSS вы можете обрезать текст в одну строку, используя text-overflow: ellipsis;
Но как вы обрезаете несколько строк текста, чтобы он выглядел так.
Линейный зажим
С помощью линейного зажима вы можете содержать блок текста в определенное количество строк, поэтому текст никогда не выходит из этих строк.
Вот как вы это сделаете:
Код .line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Здесь мы в основном делаем это, ограничивая текст максимум тремя строками. Когда текст начинает переполняться из 3 строк, он становится усеченным.
Это необходимо использовать вместе с тем, display: -webkit-box-flex; чтобы он работал.
Адаптивность:
Поскольку линейный зажим работает с количеством строк в тексте, слова начинают усекаться по мере их переполнения из блока.
Это означает, что ваш макет всегда будет под вашим контролем, несмотря на размер экрана.
Вы можете сделать его еще более гибким, разбрызгивая некоторую магию запросов мультимедиа, чтобы контролировать количество строк для разных размеров экрана.
Код @media (max-width: 768px) {
.line-clamp {
-webkit-line-clamp: 2;
}
}
Поддержка:
Теперь поддержка на данный момент предназначена только для браузеров на основе webkit и, скорее всего, останется таким.
Поскольку текст контролируется количеством строк, самым простым решением является вычисление высоты текстового блока и выполнение переполнения: нет для высоты.
Вот небольшой код, который я собрал в качестве демонстрации:
Демонстрация
Демо-версия CSS-зажима идет на SCSS
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 01 Июля 2018, 19:50 | Сообщение 2 |
|
| На демонстраций представлен материал на SCSS, возможно кто то переведет на рельсы CSS, сам пробовал, кажется без ощибок, но не так уже показывает на мобильном экране.
Код <div class="postCardWrap"> <div class="post-card"> <div class="postContent"> <img class=" postImg" src="https://res.cloudinary.com/hashnode/image/upload/w_600,h_236,c_thumb/v1477832292/fcnah6pqrbcp02qel9eo.png" /> <h2 class="post-title">Zero to One: How I mastered JavaScript and how you can too</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="post-card"> <div class="postContent"> <img class="postImg" src="https://res.cloudinary.com/hashnode/image/upload/w_600,h_236,c_thumb/v1478866829/yhqpynmzrafvn7ps9grz.jpg" /> <h2 class="post-title">Zero to One: How I mastered JavaScript and how you can too</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="post-card"> <div class="postContent"> <img class="postImg" src="https://res.cloudinary.com/hashnode/image/upload/w_600,h_236,c_thumb/v1485155270/mqvfs6glo9dmoahwhbsu.png" /> <h2 class="post-title">Zero to One: How I mastered JavaScript and how you can too</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>
SCSS
Код body {
background: #fafafa;
margin: 0;
padding: 0;
}
* {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}
.postCardWrap {
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.post-card {
width: calc(100% / 3 - 4);
padding: 12px;
margin: 8px;
border: #e0e0e0;
background: #fff;
box-shadow: 0 0 3px 0 rgba(0,0,0,.1);
border-radius: 3px;
box-sizing: border-box;
.postImg {
width: 100%;
border-radius: 3px;
}
.post-title {
font-size: 18px;
font-weight: 600;
line-height: normal;
margin: 0 0 12px;
}
p {
font-size: 15px;
color: #555;
margin: 0;
line-height: 1.4;
// Line clamp code
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
}
@media (max-width: 768px) {
width: calc(100% / 2 - 4);
}
@media (max-width: 470px) {
width: calc(100% - 8);
}
}
} | | Страна: (RU) |
| |
