Html select dropdrown width слишком велик

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

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

Просто, чтобы быть ясным, я ищу некоторую помощь, чтобы сделать мой взгляд "длинным вариантом..." или Если кто-то знает лучший способ?

Ответ 1

Пример HTML:

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

Пример CSS:

select{
    width: 100px;
    text-overflow: ellipsis;
}

DEMO - добавление... только к выбранному значению

Измените ширину на то, что лучше всего подходит для вашей ситуации. Применение text-overflow: ellipsis добавляет ... к тексту, длина которого превышает указанную ширину.

Этот стиль только применяется к выбранному значению, но при нажатии на раскрывающееся меню все параметры отображаются полностью.

Ответ 2

Если вы ищете очень простое решение, подобное тому, которое вы описали (добавление...), то что-то подобное должно работать на вас: -

$(document).ready(function() {
    var maxLength = 15;
    $('#example > option').text(function(i, text) {
        if (text.length > maxLength) {
            return text.substr(0, maxLength) + '...';
        }
    });
});

Это просто перебирает каждую option и проверяет длину текста. Если он больше, чем maxLength, он будет укорочен до той же длины, что и maxLength, и ... будет добавлен к нему.

Вот пример разметки, чтобы пойти с ним: -

<select id="example">
    <option value="1">Short</option>
    <option value="2">Oh dear, this option has really long text :(</option>
</select>

Здесь скрипка

Ответ 3

Вы можете решить эту проблему с помощью jQuery и прочитать эту статью.

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

Ответ 4

Если вы установите ширину в элементе select, например

select { width: 7em }

раскрывающийся список по-прежнему будет отображаться в его естественной ширине.

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

Ответ 5

Это зависит от того, как вы добавляете параметры для выбора - генерируется ли он на серверном языке, например PHP/Python/etc? Или это какой-то JS или его статический HTML?

Вы можете использовать любой из этих языков для сокращения строк (с... в конце). Здесь вы можете найти, как это сделать с помощью js: javascript сокращает строку без сокращения слов

Если вы более конкретны и показываете какой-то код, я могу помочь вам выполнить это в вашем конкретном случае.

Ответ 6

Изменение/изменение меню выбора с использованием только css невозможно. Я добавил небольшую демонстрацию с использованием jquery для имитации проблемы с решением.

[Truncating or showing ellipses for Long option value][1]


  [1]: http://jsfiddle.net/xpvt214o/996293/