Я хочу, чтобы вариант текста разрывался или равнялся ширине выбора? - PullRequest
Новая
       5

Я хочу, чтобы вариант текста разрывался или равнялся ширине выбора?

0 голосов
/ 18 мая 2018

codepenlink

Как разбить строку текста опции и выбрать ширину тега.

Ответы [ 3 ]

0 голосов
/ 18 мая 2018

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

.dropdown-toggle,.dropdown-menu{
  width:180px;
}
.caret{
  float:right;
  right:0;
  top:8px;
  position:relative;
}
.dropdown-menu{
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
                                       
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">long</a></li>
      <li><a href="#">very long</a></li>
      <li><a href="#">This is very very very very  very long text</a></li>
    </ul>
  </div>
</div>

</body>
</html>
0 голосов
/ 18 мая 2018

Попробуйте, 

select{
    min-width: 100px;
   text-overflow: ellipsis;
}
<select>
    <option value="1"><span>content 1</span></option>
    <option value="3">Content is so long but still some remains</option>
</select>

Рабочая скрипка

0 голосов
/ 18 мая 2018

Вы не можете применить форматирование к раскрывающемуся варианту, как указано в этом ответе

Однако вы можете использовать что-то вроде многоточия. 

var maxLength = 15;
$('#example > option').text(function(i, text) {
    if (text.length > maxLength) {
        return text.substr(0, maxLength) + '...';  
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="example" id="example">
    <option value="">This is some long text</option>
    <option value="">Short Text</option>
    <option value="">This is some really, really long text</option>
</select>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...