드롭 다운 목록에 긴 텍스트 줄 바꾸기?

내 asp.net 페이지의 드롭 다운 목록에 알기 쉽게 긴 텍스트가 있습니다. UI 경계를 위반하고 할당 된 UI 영역을 초과합니다.드롭 다운 목록에 긴 텍스트 줄 바꾸기?

CSS 나 자바 스크립트를 사용하여 포장 할 수 있습니까? 아무리 오래 있더라도 전체 문자열을 표시해야합니다.

출처

2009-07-20 this. __curious_geek

자동 완성 텍스트 상자가 필요한 것 같습니다. –

아니요, 드롭 다운 목록이 필요합니다. 그 목록은 예측 적이 아니라 명확한 것입니다. –

짧은 대답 : 번호

길게 대답 : 사용자가 선택 메뉴 대신 라디오 그룹을 사용합니다. CSS overflow 속성을 사용하여 스크롤을 추가 할 수 있습니다.

출처

2009-07-20 10:39:04 Quentin

일부 CSS 조작 드롭 다운 목록을 보았습니다. 정말 가능하지 않니? –

선택 요소는 단어 줄 바꿈을 허용하도록 스타일을 지정할 수 없습니다. 보이지 않는 라디오 버튼 등이있는 자바 스크립트 드롭 다운을 보았을 것입니다. – Quentin

길고 대답 : 예.

기본 요소가 아닌 기본 요소를 사용할 수 있지만 JavaScript 및 CSS를 사용하여 직접 만들 수는 있습니다. 사용자 정의 드롭리스트 요소는 드롭리스트 항목으로 몇 개의 div (또는 다른 HTML 요소)를 포함해야합니다. 고정 너비를 드롭리스트의 셀로 설정하면 텍스트가 안에 랩됩니다.

예 : is here (Google에서 검색어의 첫 번째 링크를 선택 함 : "JavaScript dropdown").

출처

2009-07-20 10:47:37 Pawka

그러나 좋은 예는 아닙니다. 키보드 액세스 권한이 없습니다. – Quentin

@David Dorward JavaScript는 바인드 키를 허용합니다. 그리고 말했듯이, 나는 목록에서 첫 번째 링크를 가져갔습니다. 예를 조금 더 남겨 두었습니다 :-) – Pawka

네이티브 선택 상자의 UI 표현을 유지하려는 경우 할 수있는 (다소 고약한) 방법이 있습니다. 오히려 수동적인데, 일반적으로 권장하지는 않지만 원하는 것을 얻을 수 있습니다 :

목록의 각 옵션에 대해 해당 옵션 텍스트의 문자를 기준으로 "너비"를 계산하십시오. 이것은 비례 폰트 문자 너비 (예 : ijtl = 1, aopg = 2, m = 2.5, 대략 그 종류의 것)의 모호한 표현이어야합니다.

특정 값 (사용 가능한 UI 공간에 따라이를 추정)은 적절한 지점 (공백 또는 긴 단어 하이픈 -이 작업을 수행하는 알고리즘 작성 필요)에서 분할됩니다. 원하는 크기 이상으로 청크가 없을 때까지 반복하십시오. 옵션 당 배열로 끝나야합니다 (이미 충분히 짧은 경우 일부는 길이가 1이됩니다).

일치하는 배열이 1보다 큰 각 옵션의 경우, 이후의 각 텍스트 청크가 들어있는 원본 바로 뒤에 옵션 노드를 삽입하십시오. 학생들에게 특정 클래스 (예 : long-child)와 원본과 동일한 값을 지정하십시오. 또한 이전 항목의 연속이라는 시각적 표시기를 제공해야합니다.

이벤트 처리기를 사용하여 선택한 옵션에 long-child 클래스가 있는지 확인합니다. 그렇다면 앞의 옵션을 검색하여 동일한 값을 갖는 첫 번째 옵션을 찾고 이 아닌은 long-child 클래스를 가져야합니다. selectedIndex를 그 옵션으로 설정하십시오.

내가 말했듯이, 불쾌한,하지만 당신이 원하는 효과를 얻을 수 있습니다. Pawka가 자신의 코드를 제안한 것보다 적은 코드 일 수도 있습니다.)

출처

2009-07-20 12:02:41

간단한 드롭 다운을 복잡하게하기보다는 다른 인터페이스 조각을 생각할 때라고 생각합니다.

하지만 꼭해야한다면 목록 요소를 사용하여 CSS/자바 스크립트를 사용하여 드롭 다운 위젯을 다시 작성해야합니다.

출처

2009-07-20 15:12:07

선택할 수있는 제목 목록이 필요하고 길이가 200 자까지 인 Coldfusion 사이트의 예입니다. 선택 옵션은 쿼리에서 반복되며 텍스트 문자열이 너무 길면 두 단어가 동일한 옵션 값을 갖습니다. 두 번째 문자열에 문자 패턴이 추가됩니다 (이 경우 "_ _").js를 사용하여 선택 영역의 텍스트에서 패턴을 찾습니다. pattern이 발견되면 seletectedIndex를 -1로 재설정하므로 사용자는 두 번째 텍스트를 선택하면 텍스트의 첫 번째 행만 볼 수 있습니다.

js: 
function checkSelectedValue(str) 
{ 
var val = str.options[str.selectedIndex].text; 
var indx = str.selectedIndex; 
var patt = /_ _/g; 
var result = patt.test(val); 
if(result){ 
    str.selectedIndex = str.selectedIndex - 1; 
} 
} 

cf: 
<cfselect name="title" id="title" onChange="checkSelectedValue(this);"> 
<option value="">please select a title</option> 
<cfloop query="study"> 
<cfset study.title = trim(study.title) /> 
<cfif len(study.title) lt 110> 
<option value="#study.studyid#">#study.title#</option> 
<cfelse> 
<cfset spacemarker = find(" ", study.title,100) /> 
    <cfset rightchars = len(study.title) - spacemarker /> 
    <cfif spacemarker eq 0> 
    <option value="#study.studyid#">#study.title#</option> 
    <cfelse> 
<cfset str1 = left(study.title,spacemarker) /> 
<cfset str2 = right(study.title,rightchars) /> 
    <option value="#study.studyid#">#str1#</option> 
    <option value="#study.studyid#">&nbsp;&nbsp;_ _ #str2#</option> 
    </cfif> 
</cfif> 
</cfloop> 
</cfselect>

출처

2012-03-27 20:54:15 Richard

저는 이와 같은 오래된 질문에 응답 해 왔습니다. 2009 년 이후에도 실제로 해결되지 않은 일반적인 문제입니다. :) 나는 당신이 도움이 될 수있는 한동안이 글을 썼다. http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

숨겨진 select 요소로 뒷받침되는 스타일이 적용되는 정렬되지 않은 목록을 만들기위한 jquery 플러그인이다.

소스는 GitHub의에 : https://github.com/tncbbthositg/GiantDropdown

당신은 UL에 행동과 스타일을 처리 할 수있을 거라고 당신이 선택하지 할 수 있습니다. 선택 목록이 그대로 남아 있기 때문에 다른 모든 항목이 동일해야합니다. 숨겨져 있지만 UL은이를 백업 데이터 저장소로 사용합니다 (사용자가 원할 경우).

출처

2012-06-26 16:15:41

 <!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Complainse Enteprrise Platform</title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 



    <style> 
    .widget{ 
    word-wrap: break-word; 
    text-align: left; 
    display: block; 
    cursor: pointer; 
    } 
    </style> 
    <body> 


    <div id='mask' onclick=" 
    $('#drpDown option').each(function() { 

    if($(this)){ 
    val= $(this).attr('value') ; 
    tex= $(this).html(); 
    $('#dropList').append('<span id='+$(this).val()+'><font>'+tex+'</font></span>'); 
    } 
    }); 

    $('#dropList').children().addClass('widget'); 

    $('#dropList').children().click(function(){ 
    $('#drpDown').val($(this).attr('id')); 

    $('#dropList').hide(); 

    $('#dropList').children().remove(); 
    $('#drpDown').trigger('change'); 
    }); 

    $(function() { 
    $('#dropList').children().each(function(){ 

    $(this).hover(
    function() { 
     $(this).css('background-color', '#0E15D5') 
    }, function() { 
     $(this).css('background-color', '') 
    }); 

    }); 
    }); 

    $('#dropList').show() ; 
    " style='width:200px; height:20px; position: absolute; background:white; 
    filter :alpha (opacity=0);'></div> 

    <select id="drpDown" style="width:50px; " onchange="alert('its changed');"> 
    <option value="1">aaaaa</option> 
    <option value="2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option> 
    <option value="3">ccccccccccc</option> 
    <option value="4">dddd</option> 
    </select> 

    <div id="dropList" style="display:none;width:45px; border:solid black 1px"> 
    </div > 

    <div> 


    </body> 
    </html>

출처

2014-01-16 04:17:54

드롭 다운 목록에 긴 텍스트 줄 바꾸기?

답변

관련 문제