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

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

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

Как убрать не семантический тег <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

Современный способ делать отзывчивые (адаптивные) квадраты и прямоугольники при помощи 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

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

HTML:

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

CSS:

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

#css #development #tips #tricks

CSS-трюк: плавный переход от height=0 к auto

HTML:

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ullam ipsam dignissimos perspiciatis consequatur itaque maxime nihil cupiditate veniam. Perferendis!</p>
    </div>
  </div>
</div>

CSS

.accordion {
  max-width: 500px;
  background-color: black;
  
  font-family: system-ui;
  color: white;
  
  border-bottom: 5px solid limegreen;
  cursor: pointer;
}

.accordion-title {
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1rem;
}

.accordion-body {
  padding-inline: 1rem;
}

👉 https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de

#css #html #transition #tricks

🕹Злой полицейский — Подписаться

Ошибка "The SELECT would examine more than MAX_JOIN_SIZE rows" в WP_Query

Если у вас много записей в таблицах wp_posts/wp_postmeta и при выполнении запроса WP_Query по метаполям вы получаете ошибку "The SELECT would examine more than MAX_JOIN_SIZE rows", то достаточно перед вашим WP_Query выполнить дополнительный запрос и все сработает как надо:

// Говорим MySQL, что у нас будет "большой" запрос.
global $wpdb;
$wpdb->query( 'SET SQL_BIG_SELECTS=1' );

// Выполняем сам запрос.
$items = new WP_Query(
    [
        ...
        'meta_query' => [
            ...
        ],
    ]
);

#wordpress #mysql #errors #tricks

🕹Злой полицейский — Подписаться

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

Карта навыков и компетенций тимлидов, которую можно адаптировать для любой компании и команды. Попробуйте приложить её и к себе!

👉 https://tlroadmap.io

#tricks #teamlead #roadmap

🕹 Злой полицейский — Подписаться

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

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

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

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

#tips #tricks #GoogleDrive #shortcodes

Глобально отключаем добавление файла .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

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