Злой полицейский

Как обрезать длинный многострочный текст, добавив в конце последней строки многоточие?

На ум сразу приходит использовать пару свойств:

text-overflow: ellipsis;
overflow: hidden;

Но text-overflow работает только, если текст написан в одну строку, например при помощи white-space: nowrap.

Что делать, когда у нас несколько строк?

На помощь придёт такая хитрая комбинация свойств:

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

👉 Живой пример - https://codepen.io/mihdan/pen/rNQyGPJ

#css #tricks #tips

👍8

168 viewsMikhail Kobzarev, edited 14:30

Злой полицейский

Как убрать не семантический тег <figure> в редакторе блоков Gutenberg при вставке изображений и заменить его на простой параграф <p>:

add_filter(
  'render_block',
  function ( $block_content, $block ) {
    if ( 'core/image' === $block['blockName'] ) {
      $block_content = str_replace(
        array( '<figure ', '</figure>' ),
        array( '<p ', '</p>' ),
        $block_content
      );

    }

    return $block_content;
  },
  10,
  2
);

#wordpress #gutenberg #tips #tricks #development

👍3

128 viewsMikhail Kobzarev, 14:48

Злой полицейский

Современный способ делать отзывчивые (адаптивные) квадраты и прямоугольники при помощи aspect-ratio в CSS

CSS:

.ar-1-1  {aspect-ratio: 1 / 1;}
.ar-3-2  {aspect-ratio: 3 / 2;}
.ar-4-3  {aspect-ratio: 4 / 3;}
.ar-16-9 {aspect-ratio: 16 / 9;}
.ar-2-3  {aspect-ratio: 2 / 3;}
.ar-3-4  {aspect-ratio: 3 / 4;}
.ar-9-16 {aspect-ratio: 9 / 16;}

body {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}
div {
  background: teal;
  width: 23%;
  margin:1%;
  padding:20px 0;
  box-sizing: border-box;
  color:#fff;
  text-align:center;
}

HTML:

<div class="ar-1-1">aspect-ratio: 1 / 1;</div>
<div class="ar-3-2">aspect-ratio: 3 / 2;</div>
<div class="ar-4-3">aspect-ratio: 4 / 3;</div>
<div class="ar-16-9">aspect-ratio: 16 / 9;</div>
<div class="ar-2-3">aspect-ratio: 2 / 3;</div>
<div class="ar-3-4">aspect-ratio: 3 / 4;</div>
<div class="ar-9-16">aspect-ratio: 9 / 16;</div>

Результат на скрине

👉 https://stackoverflow.com/a/23673392

#css #aspectRatio #tips #tricks

137 viewsMikhail Kobzarev, edited 19:23

Злой полицейский

Как добавить плейсхолдер для [contenteditable]

HTML:

<pre contenteditable placeholder="Сюда можно писать"></pre>

CSS:

[contenteditable]:empty:before {
    display: block;
    color: #999;
    content: attr(placeholder);
}

#css #development #tips #tricks

❤1👍1

123 viewsMikhail Kobzarev, 21:21

Злой полицейский

А все же в курсе за короткие полезные адреса для Google Drive?

Первый создаёт новую таблицу - sheet.new
Второй создаёт новый текстовый документ - doc.new
Третий создаёт новую презентацию - slide.new
Четвёртый создаёт новую форму - form.new
Пятый создаёт новый сайт - site.new

А вы в курсе за подобные шорткоды для других сервисов, например?

👮‍♂️ Злой полицейский - Подписаться | Помочь проекту

#tips #tricks #GoogleDrive #shortcodes

👍7🔥3🤯2🤡1

821 viewsMikhail Kobzarev, 21:25

Злой полицейский

💡

Советы по Laravel: Запускаем тесты PHPUnit в случайном порядке

Работая с тестами, иногда можно столкнуться с неприятной ситуацией: один тест проходит, только если выполняется сразу после другого. И если изменить порядок, этот тест ломается.

Это говорит о том, что тесты зависят друг от друга. А идеальный тест всегда должен быть независимым и начинаться с «чистого листа».

Хороший способ обнаружить такие скрытые зависимости это запускать тесты в случайном порядке. Если тест не проходит, когда порядок перемешан, это значит, что он зависит от других, и с этим нужно что-то сделать.

Лечится запуском тестов с флагом orderby:


php artisan test --order-by=random

👉 Подсмотрено на laravel.su

#laravel #phpunit #tips

👮‍♂️ Злой полицейский - Подписаться

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

769 viewsMikhail Kobzarev, 07:31

Злой полицейский

Глобально отключаем добавление файла .DS_Store в Git в MacOS при помощи .gitignore

Если вас как и меня бесят файлы .DS_Store в ОС MacOS, которые постоянно просачиваются в git-репозиторий, то это решение для вас. В решении нам поможет глобальный .gitignore.

Выполните в терминале:


echo ".DS_Store" >> ~/.gitignore_global
echo "._.DS_Store" >> ~/.gitignore_global
echo "**/.DS_Store" >> ~/.gitignore_global
echo "**/._.DS_Store" >> ~/.gitignore_global
git config --global core.excludesfile ~/.gitignore_global

👉 Подсмотрел у Счастливого тимлида

#git #macos #tips #tricks

👮‍♂️ Злой полицейский - Подписаться

👍5🔥2

728 viewsMikhail Kobzarev, 07:25

About

Blog

Apps

Platform