Как сделать так, чтобы выпадающий список не менял ширину с другим текстом или не влиял на другие элементы?
Обратите внимание, что они не используются malloc и free, но operator new и operator delete. Кроме того, в отличие от вашего кода, используя новый, вы гарантируете безопасность исключений. Почти эквивалентный код будет следующим:
AnObject* anObject = ::operator new(sizeof(AnObject));
try
{
anObject = new (anObject) AnObject();
}
catch (...)
{
::operator delete(anObject);
throw;
}
anObject->~AnObject();
::operator delete(anObject)
Предлагаемый сброс действителен, но не идиоматичен. Трудно получить право, и, как правило, на него нахмурились и обескуражены.
3 ответа
Друг, я изменяю CSS класса .btn. Вот этот кодекс, как этот
.btn{
min-width: 131px;
max-width: 131px;
overflow: hidden;
text-overflow: ellipsis;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.number{
font-size: 3vw;
vertical-align: middle;
margin: 3px;
}
</style>
</head>
<body>
<div class="container text-center">
<!-- template for one dropdown -->
<template id="template">
<div class="entry">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Not Selected</button>
<div class="dropdown-menu">
<a class="dropdown-item">Not Selected</a>
<a class="dropdown-item">short</a>
<a class="dropdown-item">This is very long text</a>
</div>
</div>
</div>
</template>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
//generates 5 dropdowns concisely (instead of copying and pasting HTML code)
var template = document.getElementById("template")
for(var i = 1; i<=5; i++){
//creates span with number
var span = document.createElement("span");
var num = document.createTextNode(i);
span.setAttribute("class", "number");
span.appendChild(num);
//adds span to the template
var clon = template.content.cloneNode(true);
clon.childNodes[1].prepend(span);
document.getElementsByClassName("container")[0].appendChild(clon);
}
$(document).ready(function(){
//replaces text in the dropdown with current selection
$(".dropdown-item").on("click", function(){
$(this).parent().prev().text($(this).text());
});
});
</script>
</body>
</html>[112 ] https://codepen.io/Qleoz12/pen/NempvQ?editors=1100
имейте в виду, что длинный текст в некоторых случаях может быть переполнен
Вы можете добавить следующее свойство CSS для решения этой проблемы:
.btn-group button{
width:130px !important;
}
Добавьте ширину к вашему классу кнопок следующим образом, это предотвратит его изменение в зависимости от выбранного значения.
.btn-success {
width:250px;
max-width:100%;
}