#html #css
#HTML #css
Вопрос:
я пытаюсь масштабировать контейнер div в выпадающем меню, чтобы он лучше соответствовал тексту внутри.
<div class='dropdown'>
<button class ="dropbtn"><b>Hover!</b></button>
<div class='dropdown-content'>
<div class='dropdown-level2'>
<button class ="dropbtn-level2"><b>"..."</b></button>
<div class='dropdown-content-level2'>
<a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</a>
</div>
</div>
</div>
</div>
Смотрите: http://codepen.io/anon/pen/BLvxwY
Конечно, я мог бы просто установить минимальную ширину, однако содержимое генерируется динамически. Таким образом, может получиться текст короче минимальной ширины.
Как я могу соответствующим образом масштабировать div?
Спасибо
Комментарии:
1. Вы имеете в виду изменить ширину контейнера на длину текста?
2. По длине текста, да.
3. К сожалению, этого не произошло. Я пытался протестировать это в codepen. Но результаты не такие, как хотелось бы.
4. Каков желаемый результат для вас?
5. посмотрите на этот кодовый стилус codepen.io/Wolka/pen/VKqoXm . Я редактирую свой ответ.
Ответ №1:
Вы можете использовать Js и посчитать длину текста.
После этого измените ширину контейнера с помощью If, Else if and Else инструкции.
Это выглядит так:
$(document).ready(function(){
$('.dropdown-content-level2 > a').each(function(){
//count your text length
var textLength = $(this).html().length;
//if it less from 100 characters
if (textLength < 100) {
$(this).css('width', '100px')
} else {
$(this).css('width', '200px')
}
})
})
И если у вас возникнет больше ситуаций:
$(document).ready(function(){
$('.dropdown-content-level2 > a').each(function(){
var textLength = $(this).html().length;
if (textLength < 100) {
$(this).css('width', '100px')
} else if (textLength > 100 amp;amp; textLength < 200) {
$(this).css('width', '200px')
} else {
$(this).css('width', '300px')
}
})
})
Работает CodePen