드롭 다운 상자의 오버플로 텍스트에 대한 줄임표

드롭 다운 상자의 오버플로 텍스트에 대한 줄임표

---

드롭 다운 상자 중 하나의 너비를 수정하고 있습니다 (예 :이 작업을 수행하는 데 브라우저 간 문제가 있음을 알고 있습니다).

넘쳐나는 텍스트를 자르고 타원을 추가하는 비 -js 방법이 있습니까? text-overflow : ellipsis는 <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/

---

HTML은 양식 컨트롤에 대해 지정하는 내용이 매우 제한적입니다. 따라서 운영 체제 및 브라우저 제조업체가 적절하다고 생각하는 작업을 수행 할 수있는 여지가 남습니다 (예 : select열었을 때 기존 팝업 메뉴와 완전히 다르게 보이는 iPhone의 모달 ).

대부분의 운영 체제는 생략없이 선택한 옵션을 잘라낸 것처럼 보입니다. 텍스트가 잘리는 방식을 변경할 수 있다면 나머지 운영 체제에서 선택 상자가 작동하는 방식이 아니기 때문에 이상하게 보일 것입니다.

이 버그를 경우 같은 사용자 정의 교체, 사용할 수있는 선택된 기본 구별 보인다 select.

또는 주요 운영 체제 나 브라우저에 대해 버그를 신고합니다. 우리가 아는 한, selects 에서 텍스트가 잘리는 방식은 모든 사람이 복사 한 수년간의 감독의 결과 일 수 있으며 변경해야 할 때일 수 있습니다.

---

선택 상자에 사용자 지정 화살표가 있고 텍스트가 화살표 위로 이동하기 때문에이 질문을 찾는 경우 일부 브라우저에서 작동하는 솔루션을 찾았습니다. select오른쪽의에 약간의 패딩을 추가하십시오 .

전에:

후:

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/

---

가장 간단한 해결책은 HTML 자체의 문자 수를 제한하는 것입니다. Rails에는 truncate (string, length) 도우미가 있으며 사용중인 백엔드가 비슷한 기능을 제공한다고 확신합니다.

선택 상자의 너비와 관련하여 이미 익숙한 브라우저 간 문제로 인해 이것은 가장 간단하고 오류 발생 가능성이 가장 낮은 옵션 인 것 같습니다.

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

---

이것을 사용할 수 있습니다 :

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;
}

---

quirksmode는 'text-overflow'속성에 대한 좋은 설명을 가지고 있지만 'white-space : nowrap'과 같은 추가 속성을 적용해야 할 수도 있습니다.

이것이 선택 개체에서 어떻게 작동하는지 100 %는 아니지만 먼저 시도해 볼 가치가 있습니다.

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

---

부트 스트랩 툴팁 대신이 jQuery 함수를 사용할 수 있습니다.

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');
    }
}

---

실제로 잘 작동하는 절대적인 해킹을 찾았습니다.

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

하지만 CSS만이 아닙니다.

기본 요점은 .select-container이 경우 드롭 다운에 컨테이너가있는 것 입니다. 해당 컨테이너에는 생략 기호가 작동하도록 필요한 모든 및 크기 조정 과 함께 속성 / 데이터 세트를 기반으로 ::before표시하도록 설정되어 있습니다.contentdata-contentoverflow:hidden; text-overflow: ellipsis;

선택이 변경되면 javascript는 값을 select.options컨테이너의 dataset.content에 할당합니다 (또는 목록 에서 옵션의 텍스트를 검색 할 수 있음 ).

여기에 코드 펜 내용 복사 :

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;
  }
}

<span>Hack:</span><div class="select-container" data-content="">
  <select class="select" id="words">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>
<br />

<span>Regular:</span>
<div class="regular">
  <select style="width: 80px;">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>

---

CSS 파일

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

JS 파일

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

---

약간 단순하지만 브라우저에서 나를 위해 일했습니다.

select {
    font-size: 0.9rem;
}

참고 URL : https://stackoverflow.com/questions/7289769/ellipsis-for-overflow-text-in-dropdown-boxes