选择列表中的自动换行选项

发布于 2024-09-16 11:05:36 字数 570 浏览 2 评论 0原文

是否可以在选择列表中包含长选项？

我有一个动态选择列表，其中一些选项非常长。我想要太长的选项，无法换行到下一行。除此之外，我想缩进这些行。

如果这不可能，我的解决方案是将结果修剪为 n 个字符。

这就是我所拥有的：

I'm a short option
This is a really really really long option
This one isn't too bad
But whoa look how long I am! I go on forever!

这就是我想要的：

I'm a short option
This is a really really 
    really long option
This one isn't too bad
But whoa look how long 
    I am! I go on forever!

原文

Is it possible to wrap long options within a select list?

I have a dynamic select list, and some of the options are pretty lengthy. I'd like options that are too long to wrap to the next line. Beyond that, I'd like to indent those lines.

My solution if this isn't possible is to just trim the result to n characters.

Here's what I have:

I'm a short option
This is a really really really long option
This one isn't too bad
But whoa look how long I am! I go on forever!

And here's what I'd like to have:

I'm a short option
This is a really really 
    really long option
This one isn't too bad
But whoa look how long 
    I am! I go on forever!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七婞 2024-09-23 11:05:36

你不能用标准的来做到这一点，你需要自己动手或找到一个菜单插件

回复收藏 0 原文

猫瑾少女 2024-09-23 11:05:36

这是一个快速而纯粹的 jQuery 解决方案，可能会对某些人有所帮助。除了创建自己的下拉菜单并从隐藏选择中提取值/文本（如 Scott Evernden 提到的）之外。这会给你一些发挥的空间。它不会在单词中间截断，但同时也不会换行文本。它将把全文放入标题中，以便用户可以将鼠标悬停并看到全文换行。然后，它将使用 maxChar 设置转到一定数量的字符，然后查找其所在单词的末尾，以免切断该单词。选项的最小宽度应使其与选择保持内联，但继续使用 maxChar 变量，它应防止其超出范围。这是一个简短的解决方法，因为在大多数情况下我会采用定制的解决方案，但对于快速列表，用户可以知道他们用第一个或两个单词选择的内容，这非常有效。希望这对某人有帮助：

var optionText, array = [], newString, maxChar = 40;
$('select').each(function(){
    $(this).find('option').each(function(i,e) {
        $(e).attr('title',$(e).text());
        optionText = $(e).text();
        newString = '';
        if (optionText.length > maxChar) {
            array = optionText.split(' ');
            $.each(array,function(ind,ele) { 
                newString += ele+' ';
                if (ind > 0 && newString.length > maxChar) {
                    $(e).text(newString);
                    return false;
                }
            });

        }
    });
});

Here is a quick and pure jQuery solution that may help some. Outside of creating your own drop down and pulling the values/text from a hidden select as mentioned by Scott Evernden. This will give you some room to play with. It doesn't cut off in the middle of a word but at the same time it doesn't wrap the text. It will put the full text into the title so a user may rollover and see the full text word wrapped. It will then use the maxChar setting to go to a certain number of characters then look for the end of the word it is on so as not to cut off the word. The min-width of the option should keep it inline with the select but go ahead and play with the maxChar variable and it should keep it from going outside the bounds. This is a short workaround as I would in most cases go with a customized solution but for quick lists where users can know what they are picking with the first word or two this works great. Hope this helps someone:

var optionText, array = [], newString, maxChar = 40;
$('select').each(function(){
    $(this).find('option').each(function(i,e) {
        $(e).attr('title',$(e).text());
        optionText = $(e).text();
        newString = '';
        if (optionText.length > maxChar) {
            array = optionText.split(' ');
            $.each(array,function(ind,ele) { 
                newString += ele+' ';
                if (ind > 0 && newString.length > maxChar) {
                    $(e).text(newString);
                    return false;
                }
            });

        }
    });
});

回复收藏 0 原文

~没有更多了~