css расширяет текст при зависании

Мне нужен css, который по умолчанию показывает только две строки кодов. Но когда пользователь наводил на него текст, остальная часть текста должна отображаться.css расширяет текст при зависании

Например:

Это то, что это должно выглядеть по умолчанию:

И это то, что он должен быть, как когда пользователь парить на нем:

Как вы можете видеть, остальная часть текста отображается, когда пользователь наводил на нее, но по умолчанию только два строки названия продукта будут показаны

Что такое трюк css для этого?

Благодаря

источник

2016-05-06 j edgar

Что вы пробовали себя? Где исходная точка в коде? Добавьте пример Minimal, Complete и Verifiable, см. Также http://stackoverflow.com/help/mcve – Roy

Возможный дубликат [Объединить: после с помощью: hover] (http://stackoverflow.com/questions/13233991/combine -after-with-hover) – Jurik

Просто установите фиксированный height на элемент и сбросить его по умолчанию при наведении курсора мыши.

.special { 
 
    width: 100px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
} 
 
.special:hover { height: auto; }

<div class="special"> 
 
    This is very long text This is very long text This is very long text This is very long text This is very long text This is very long text 
 
</div>

Если вы хотите анимацию, а также, использовать max-height. Вот пример jsFiddle.

источник

2016-05-06 07:32:54 Buksy

Upvote. Просто добавьте предложение, установите высоту линии с помощью em, а затем установите высоту в два раза больше высоты строки, чтобы сначала показать две полные строки. то есть 'line-height: 1.1em; height: 2.2em;' –

https://jsfiddle.net/chan_omega/vmaf5en1/1/ –

@ArleighHix nice one :) –

Ну, если вы ищете простой ответ затем пойти с этим fiddle

Что я сделал есть, создан р тег и используется span внутри. На парении р показывают продолжительность и вы сделали :)

HTML

<p> 
    This is the test which will be shown up normally 
    <span>But if you will hover on the test then this text will also be there./span> 
    </p>

CSS

span 
    { 
    display:none; 
    } 
p:hover span 
    { 
    display:block; 
    }

источник

2016-05-06 07:34:52

Лучше всего было бы использовать "переполнение: скрытый" , затем измените размер контейнера с выбором «: hover». Надеюсь, что это помогло

источник

2016-05-06 07:35:54 pelomeduda

Вы можете сделать это (фиксируя высоту и продлить его на парении с некоторым переходом) так:

.extend { 
 
    background-color: cadetblue; 
 
    padding: 5px 5px 5px 5px; 
 
    border-radius: 4px; 
 
    height: 50px; 
 
    width: 25%; 
 
    transition: height 0.5s; 
 
    -webkit-transition: height 0.5s; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
.extend:hover { 
 
    height: 145px; 
 
}

<div class="extend"> 
 
    <p>Aliquet suspendisse imperdiet in, class sollicitudin condimentum ante odio! Litora semper arcu, auctor maecenas sodales.</p> 
 
</div>

источник

2016-05-06 07:44:38

css расширяет текст при зависании

ответ

Смежные вопросы