» »

Показ скрытого контента на сайте в jQuery

Показ скрытого контента на сайте в jQuery
При заполнении на сайте, нам нужно написать много знаков, где автоматически все заполняется, и мы уже не видим, что дальше пишем в блоке сайта. И здесь смотря один эффект на одном зарубежном сайте мне попался оригинальный вариант, как можно автоматически выводить все буквы и знаки, в тот момент, когда мы прекращаем их наблюдать. Возможно у кого пароль длинный по знакам, что он его пишет, и далее уже на автомате, и иногда получается, что где-то не правильно значение проскочило.

Теперь при установке решение вы всегда будете в курсе, что вы пишите, так как все ниже станет дублировать, то все визуально не просматриваются. Как веб-разработчики должны создавать сайты таким образом, чтобы они соответствовали разной длине текста. Вы должны быть уверены, что ваша разметка выглядит так же хорошо с 50-символьным именем пользователя, как и с 5-символьным.

В прошлом это было возможно только путем разрезания текста на стороне сервера или с помощью JavaScript, но сегодня мы можем сделать это только с помощью CSS благодаря таким свойствам, как max-width и text-overflow.

В этом коротком уроке узнаете про простую технику, которая плавно переходит в фоновый текст. Установив значение max-width, где можем добиться эффекта, который вы можете увидеть в демонстрационной версии.

Вот что нам поможет каждый из них:

1. Элемент будет свободно увеличивать свою ширину, пока не достигнет значения, установленного max-width.
2. В этот момент весь лишний текст будет скрыт благодаря overflow:hidden свойству.
3. Чтобы предотвратить разрыв текста на новую строку, мы используем white-space:nowrap.
4. Чтобы создать плавный переход между текстом и цветом фона элемента, мы будем использовать псевдоэлемент:after. Этот элемент будет иметь linear-gradient прозрачный цвет фона, где расположится справа от контейнера и станет видимым только при расширении элемента.

По умолчанию в установке так получится, так, что свои коррективы под стиль дизайна ставить.

Поле с скрытым содержанием с помощью CSS3

Подключаем библиотеку

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

HTML

Чтобы подготовить почву, мы должны сначала написать несколько строк HTML:

Код
<input type="text" value="Этот текст будет расширяться" />
<h2><span id="elem" class="perepolneniye-300"></span> и это сместится в сторону.</h2>

Ввод текста необходим только для того, чтобы дать посетителю возможность легко изменять контент, в противном случае им придется использовать инструменты разработчика своего браузера. Элементом, к которому применяется метод переполнения, является диапазон #elem . Здесь идет класс с именем perepolneniye-300, который мы будем использовать для реализации техники в нашем CSS.

CSS

Код
h2 {
  text-align: center;
  color: #555d6e;
  font-weight: normal;
}

.perepolneniye-300{
  overflow:hidden;
  max-width:315px;
  position:relative;
  white-space: nowrap;
}

.perepolneniye-300:after{
  content:'';
  position: absolute;
  left:315px;
  margin-left: -38px;
  width: 38px;
  height:100%;
  top:0;
  background:linear-gradient(to right, rgba(242, 242, 243, 0), rgba(242, 242, 243, 1));
}

input[type=text] {
  display: block;
  margin: 40px auto;
  width: 315px;
  height: 30px;
  font: inherit;
  line-height: 1;
  text-align: left;
  padding: 4px 20px;
  border-radius: 3px;
  border: 1px solid #bbb9b9;
  box-shadow: 0 1px 1px #c7c2c2;
}

Следует помнить, что мы не можем установить элемент width или элемент max-width, для которого установлено значение display:inline, где отображение элементов span по умолчанию.

JS

Код
$(function(){

  var elem = $('#elem'),
  textbox = $('input[type=text]');

  textbox.on('input', function(){
  elem.text(textbox.val());
  });

  textbox.trigger('input');
});

Если вы хотите изменить максимальную ширину элемента, вам также необходимо изменить левое значение:after элемента. Также здесь есть несколько jQuery, которые будут прослушивать событие ввода текста в текстовом поле и обновлять содержимое span:

Этот метод выглядит по функциям отлично, так как text-overflow:ellipsis на самом деле отображается больше текста, и он прекрасно сочетается с дизайном страницы. Однако за счет этого требуется больше строк CSS, и вам необходимо вручную установить максимальную ширину. В некоторых случаях дополнительные усилия того стоят, когда целью является более чистый дизайн.

Демонстрация
2019-12-08 Загрузок: 1 Просмотров: 545 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2019-12-08 01:001
0
Возможно по другому как то можно зазвать, на английском так написано - My New Favorite Technique For Hiding Overflowing Text, что половина не корректно переводит.
avatar