HTML 列表框换行文本答案

【问题标题】：HTML listbox wrap textHTML 列表框换行文本
【发布时间】：2017-01-24 18:28:20
【问题描述】：

我有代码

  <select name="d" ><option value="sdf" class="test1">How to wrap the big line text How to wrap the big line text How to wrap the big line text How to wrap the big line text How to wrap the big line text How to wrap the big line text  text How to wrap the big line text How to wrap the big line text </option></select>

我需要在列表框内换行。我们该怎么做？？我尝试使用 CSS Wrap 文本 .. 它不起作用。

请帮帮我

问候迪彭

【问题讨论】：

您不能在选项中包含文本，但您可以为 (text > some length) 编写自定义省略号，以便控制下拉菜单的宽度。
你可以试试这个 jquery 插件来做你所需要的github.com/fnagel/jquery-ui/wiki/Selectmenu

标签： jquery css html listbox

【解决方案1】：

你不能用自动换行来做到这一点——你可能想看看这个Word wrap options in a select list

此外，您可以使用无序列表模拟整个下拉列表。

【讨论】：

【解决方案2】：

这样试试，

style="word-wrap:break-word;width:100%;"

 <select name="d" style="word-wrap:break-word;width:100%;"><option value="sdf" class="test1">How to wrap the big line text How to wrap the big line text How to wrap the big line text How to wrap the big line text How to wrap the big line text How to wrap the big line text  text How to wrap the big line text How to wrap the big line text </option></select>

【讨论】：

【解决方案3】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> limited text</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>

$(document).ready(function(){
    var l=$(".main div").text();
    var store=new Array();
    var i=0;
    $(".main div").each(function(){
    l=$(this).text().length;
    store[i]=$(this).text();
    i++;
    if(l>200){

        var a=$(this).text().slice(0,190);  
        $(this).text(a);
        var d=$(this).addClass("after");                
        }           
        });

    $(".main div").click(function(){        
            var id=$(this).attr("id");
            $(this).text(store[id-1]);
            var d=$(this).removeClass("after");
        });
    });

</script>

<style>
.main div { width:500px;word-wrap:break-word; background-color:#9CF; margin:5px; border:2px solid black}
.after:after{content:"...";}

</style>

</head>

<body>

<div class="main">
<div id="1">The oldest classical Greek and Latin writing had little or no spaces between words or other ones, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.</div>
<div id="2">In ancient manuscripts, another means to divide sentences in into paragraphs was a line break (newline) followed by an initial at the beginning of the next paragraph. An initial is an oversize capital letter, sometimes outdented beyond the margin of text. This style can be seen, for example, in the original Old English manuscript of Beowulf. Outdenting is still used in English typography, though not commonly.[4] Modern English typography usually indicates a new paragraph by indenting the first line. This style can be seen in the (handwritten) United States Constitution from 1787. For additional ornamentation, a hedera leaf or other symbol can be added to the inter-paragraph whitespace, or put in the indentation space.</div>
<div id="3">A second common modern English style is to use no indenting, but add vertical whitespace to create "block paragraphs". On a typewriter, a double carriage return produces a blank line for this purpose; professional typesetters may put in an arbitrary vertical space by adjusting leading. This style is very common in electronic formats, such as on the World Wide Web and email.</div>
<div id="4">How such documented are actually stored depends on the file format. For example, HTML uses the <p> tag as a paragraph container. In plaintext files, there are two common formats. Pre-formatted text will have a newline at the end of every physical line, and two newlines at the end of a paragraph, creating a blank line. An alternative is to only put newlines at the end of each paragraph, and leave word wrapping up to the application that displays or processes the text (if it is even necessary).</div>enter code here
</div>
<p> click on any paragraph...</p>
</body>
</html>

【讨论】：

欢迎来到 SO 并感谢您发布答案。为清楚起见，我建议您编辑帖子以添加几行文字来解释您的代码。

【解决方案4】：

我们可以使用 asp:DataList 控件代替 Listbox

<div style="width:200px;height:200px;overflow-y:scroll">
            <asp:DataList ID="DataList1" runat="server" DataSourceID="[nameofthedatasource]" OnSelectedIndexChanged="DataList1_SelectedIndexChanged" RepeatLayout="Flow" ShowFooter="False"  BorderColor="Black" GridLines="Vertical">
                <AlternatingItemStyle  BackColor="Green" ForeColor="Maroon" />
                <ItemTemplate >
                    <asp:LinkButton style="padding:0;margin:0;background-color:transparent;width:200px;word-wrap:break-word;text-decoration:none;height:auto" ID="btnNested" runat="server"  Text='<%# Eval("path") %>'/>
                  </ItemTemplate>
                <SelectedItemStyle BackColor="Yellow" ForeColor="Navy" />
    </asp:DataList>
        </div>

用任何数据源替换 [nameofthedatasource] 或删除属性并在代码隐藏中以编程方式设置它

将[path]替换为要绑定的属性名

【讨论】：