css - 有没有一种 CSS 方法可以根据文本字符串的大小自动设置元素的宽度？

Question

我正在创建一个样式化的选择菜单，我在其中设置了一个无序列表的样式来替换我的选择元素。

<div class="select">
    <select name="distance" id="distance" class="select-hidden">
        <option value="5.0 5"><font><font>5 mi</font></font></option>
        <option value="6.0 4">6 km</option>
        <option value="10.0 4" selected="selected"><font><font>10 km</font></font></option></select><div class="select-styled">10 km</div><ul class="select-options" style="display: none;"><li rel="5.0 5"><font><font>5 mi</font></font></li><li rel="6.0 4"><font><font>6 km</font></font></li><li rel="10.0 4"><font><font>10 km</font></font></li></ul>
</div>

然后我就有了这个风格

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #000000;
  width: 220px;
  height: 42px;
}

现在我正在对宽度 (220px) 进行硬编码，我的问题是我能否以一种不太严格的方式构建它，以便宽度自动成为最长元素名称的宽度？这是说明我的困境的 fiddle — https://jsfiddle.net/n73ao02h/13/ .

Answer 1

怎么样:https://jsfiddle.net/n73ao02h/14/

没有任何 width 的选择框将始终根据其选项设置样式。所以我们用那个...

第一步是去除固定宽度。
在添加 display:none 之前，我们在 JS 中获取宽度。
然后我们生成一个宽度为零的临时元素 styled-select 以自动获取 CSS 中定义的填充，而无需对其进行硬编码。

然后我们就拥有了计算您的样式选择框的新宽度所需的一切:

    /* ... */
    var $paddingCalculator = $('<div />', {
        'class' : "select-styled test"
    }).css({
        width : 0,
        visibility : "hidden"
    }).appendTo("body");
    var paddingWidth = $paddingCalculator.outerWidth();
    $paddingCalculator.remove();

    var selectWidth = $this.width() + paddingWidth;

    $this.addClass('select-hidden');
    if ( !$this.parent().hasClass('select') ) {
        var $wrapper = $("<div />", {
            'class' : "select"
        }).css({
            width : selectWidth
        });
        $this.wrap( $wrapper );
    }   // if
    /* ... */

---

小补遗:
请记住，原始选择框和样式化的 div 两者都需要具有相同的字体大小(以及任何与文本样式相关的内容，例如字体系列、字体粗细、字母间距等)，因此计算出的尺寸是正确的。