HTML列表框包裹文本

我有代碼HTML列表框包裹文本

<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文本..它不工作。

請幫我傢伙

問候 Dipen

來源

2012-05-24 Rockstar

您不能在選項中包裝文本，但可以爲（text>某個長度）編寫自定義省略號，以便控制下拉寬度。 –

你可以試試這個jquerry插件來做你需要的東西https://github.com/fnagel/jquery-ui/wiki/Selectmenu –

嘗試這種方式，

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>

來源

2012-05-24 19:04:34 premcs

你不能換 - 做 - 你可能希望看到這個Word wrap options in a select list

另外，您可以使用無序列表模擬整個下拉列表。

來源

2012-05-24 19:07:12 Ana

<!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>

來源

2014-03-04 05:48:01 user3377689

歡迎來到SO並感謝你發佈了一個答案。爲了清晰起見，我建議你編輯你的文章，添加幾行文字說明你的代碼。 – pschueller

我們可以使用一個ASP：DataList控件代替列表框

<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]或在代碼隱藏刪除屬性和塞提特編程

用屬性nam替換[path] e將被綁定

來源

2017-01-24 10:28:20

HTML列表框包裹文本

回答

相關問題