Question

我正在修复其中一个下拉框的宽度（是的，我知道这样做存在跨浏览器问题）。

是否有非js方法来切断溢出的文本并附加省略号？文本溢出：省略号不适用于<select>元素（至少在Chrome中）。

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

此处示例： http://jsfiddle.net/t5eUe/

Answer 1

如果你发现这个问题是因为你的选择框上有一个自定义箭头而且文字超过你的箭头，我找到了一个适用于某些浏览器的解决方案。只需在右侧的select添加一些填充。

在：

enter image description here

后：

enter image description here

CSS：

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS会忽略padding属性，但会使用-webkit-属性。

http://jsfiddle.net/T7ST2/4/

Answer 2

HTML在表单控件中指定的内容非常有限。这为操作系统和浏览器制造商提供了他们认为合适的空间（例如iPhone的模态select，当打开时，它看起来与传统的弹出菜单完全不同）。

看起来大多数操作系统都会在没有省略号的情况下关闭所选选项。如果您能够更改文本的截断方式，那么看起来很奇怪，因为选择框不是在操作系统的其余部分中工作的。

如果它有问题，您可以使用可自定义的替代品，例如Chosen，它看起来与原生select不同。

或者，针对主要操作系统或浏览器提交错误。我们所知道的，select中文本被切断的方式可能是每个人都复制了几年的疏忽的结果，也许是改变的时候了。

Answer 3

最简单的解决方案可能是限制HTML本身的字符数。 Rails有一个truncate(string, length)帮助器，我确信无论你使用哪个后端提供类似的东西。

由于跨浏览器问题，您已经熟悉了选择框的宽度，这在我看来是最直接且最不容易出错的选项。

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

Answer 4

您可以使用：

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
select option {
    width:100px;
    text-overflow:ellipsis;
    overflow:hidden;
}
div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

Answer 5

quirksmode对'text-overflow'属性有很好的描述，但你可能需要应用一些额外的属性，比如'white-space：nowrap'

虽然我不是100％在选择对象中的行为方式，但首先应该尝试这个：

http://www.quirksmode.org/css/textoverflow.html

Answer 6

您可以使用此jQuery函数代替加上Bootstrap工具提示

function DDLSToolTipping(ddlsArray) {
    $(ddlsArray).each(function (index, ddl) {
        DDLToolTipping(ddl)
    });
}

function DDLToolTipping(ddlID, maxLength, allowDots) {
    if (maxLength == null) { maxLength = 12 }
    if (allowDots == null) { allowDots = true }

    var selectedOption = $(ddlID).find('option:selected').text();

    if (selectedOption.length > maxLength) {
        $(ddlID).attr('data-toggle', "tooltip")
                .attr('title', selectedOption);

        if (allowDots) {
            $(ddlID).prev('sup').remove();
            $(ddlID).before(
            "<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>"
               )
        }
    }

    else if ($(ddlID).attr('title') != null) {
        $(ddlID).removeAttr('data-toggle')
                .removeAttr('title');
    }
}

Answer 7

我在最近的项目中使用了这种方法，对结果感到很满意：

.select-wrapper {
    position: relative;
    &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        content: "";
        background: linear-gradient(to right, transparent, white);
        pointer-events: none;
    }
}

基本上，将选择内容包装在div中，然后插入一个伪元素以覆盖文本的结尾，以创建文本淡出的外观。

Answer 8

CSS文件

.selectDD {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;     
}

JS文件

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});

Answer 9

发现这种绝对有效的技巧确实很有效：

https://codepen.io/nikitahl/pen/vyZbwR

虽然不是CSS。

基本要点是在下拉列表中有一个容器，在这种情况下为let headers = [ "TRN-Api-Key": "3418ac17-824a-414c-a36c-3c7f0da6f856", "Content-Type": "application/x-www-form-urlencoded", "cache-control": "no-cache", "Postman-Token": "3c891d92-427e-49a1-9887-c64ff620846a"] let request = NSMutableURLRequest(url: NSURL(string: "https://public-api.tracker.gg/apex/v1/standard/profile/5/TwitchTV_Madzzy")! as URL, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 10.0) request.httpMethod = "GET" request.allHTTPHeaderFields = headers let session = URLSession.shared let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in if (error != nil) { print(error!) } else { let httpResponse = response as? HTTPURLResponse print(httpResponse!) } }) dataTask.resume()。该容器的.select-container设置为根据其::before属性/数据集以及所有content和尺寸来显示data-content，以使省略号起作用。 / p>

当选择更改时，javascript将值（或者您可以从overflow:hidden; text-overflow: ellipsis;列表中检索选项的文本）分配给容器的dataset.content，瞧！

在此处复制代码笔的内容：

select.options

var selectContainer = document.querySelector(".select-container");
var select = selectContainer.querySelector(".select");
select.value = "lingua latina non penis canina";

selectContainer.dataset.content = select.value;

function handleChange(e) {
  selectContainer.dataset.content = e.currentTarget.value;
  console.log(select.value);
}

select.addEventListener("change", handleChange);

span {
  margin: 0 10px 0 0;
}

.select-container {
  position: relative;
  display: inline-block;
}

.select-container::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
  padding: 7px;
  font: 11px Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: capitalize;
  pointer-events: none;
}

.select {
  width: 80px;
  padding: 5px;
  appearance: none;
  background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
  background-size: 10px 10px;
  color: transparent;
}

.regular {
  display: inline-block;
  margin: 10px 0 0;
  .select {
    color: #000;
  }
}

Answer 10

有点简单，但在浏览器上为我工作：

select {
    font-size: 0.9rem;
}

省略号用于下拉框中的溢出文本

10 个答案: