Firefox의 텍스트 오버 플로우 : Ellipsis를 모방하려면 어떻게해야합니까?
https://stackoverflow.com/questions/1820384
-
10-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
DIV에 동적 텍스트가 포함되어 있으며 사용자가 텍스트 상자 필드에 들어가는 모든 것에 설정되어 있습니다. 텍스트가 div에 맞지 않으면 지금은 가장자리에서 잘려 나가고 테두리를 지나서 연장되는 모든 텍스트가 보이지 않습니다. 텍스트가 상자 안에 맞도록 텍스트를 자르고 끝에 타원 (...)이 추가되었습니다. 예를 들어:
|----div width------|
Here is some sample text that is too long.
Here is some sam...
코드 태그가 고정 된 넓은 글꼴을 사용하므로 문자를 계산하는 것만 큼 간단하기 때문에 쉽게 예제에서 쉽습니다. 나는 가변 폭 글꼴이 있으므로 "wwwwwwwwww"를 입력하면 "................"보다 훨씬 적은 문자를 채울 것입니다.
이것을하는 가장 좋은 방법은 무엇입니까? 여기에서 텍스트의 실제 픽셀 너비를 단순히 찾을 수있는 잠재적 솔루션을 찾았습니다. http://www.codingforums.com/archive/index.php/t-100367.html
그러나 그와 같은 방법을 사용하더라도 타원을 구현하는 것은 약간 어색합니다. 따라서 20 자이고 맞지 않는 경우 19까지 자르고 엘립스 시스를 추가 한 다음 다시 맞는지 확인해야합니다. 그런 다음 18으로 자르고 (Ellipsis) 다시 시도하십시오. 그리고 다시. 그리고 다시 ... 맞을 때까지. 더 좋은 방법이 있습니까?
편집 : 나는 해킹처럼 느껴지는 단순히 측정을 위해 별도의 TD 요소를 만들지 않음으로써 위의 링크의 솔루션을 개선하려고 시도한 것을 제외하고는 원래 접근 방식이 가장 좋다는 답을 바탕으로 결정했습니다.
내 코드는 다음과 같습니다.
<div id="tab" class="tab">
<div id="tabTitle" class="tabTitle">
<div class="line1">user-supplied text will be put here</div>
<div class="line2">more user-supplied text will be put here</div>
</div>
</div>
그리고 스타일 :
.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}
.tab .tabTitle {
height: 30px;
width: 122px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}
.tab .tabTitle .line1, .tab .tabTitle .line2 {
display:inline;
width:auto;
}
그리고 타원을 다듬고 추가하는 JavaScript :
function addOverflowEllipsis( containerElement, maxWidth )
{
var contents = containerElement.innerHTML;
var pixelWidth = containerElement.offsetWidth;
if(pixelWidth > maxWidth)
{
contents = contents + "…"; // ellipsis character, not "..." but "…"
}
while(pixelWidth > maxWidth)
{
contents = contents.substring(0,(contents.length - 2)) + "…";
containerElement.innerHTML = contents;
pixelWidth = containerElement.offsetWidth;
}
}
"line1"및 "line2"div가 함수로 전달됩니다. "wwwwwwwwwwwwww"와 같은 단일 단어 입력의 경우 작동하지만 다중 단어 입력 "wwwww wwwww wwwww"는 "wwwww"의 폭으로 텍스트를 추가하기 때문에 "wwwww wwwww wwwww"가 작동하지 않습니다.
텍스트를 숨겨진 측정 요소에 복사하지 않고이 문제를 해결할 수있는 방법이 있습니까? 텍스트를 랩핑하지 않도록 라인 div의 스타일을 설정하는 방법은 무엇입니까?
해결책
텍스트를 랩핑하지 않도록 라인 div의 스타일을 설정하는 방법은 무엇입니까?
거기에 있습니다 white-space: nowrap 을 위한. 예, 이것은 고대 브라우저에서도 작동합니다.
다른 팁
이 문제는 Firefox에서도 작동해야합니다.
HTML
<div class="ellipsis">Here goes too long text and when it is takes more than 200px in "end" of the text appears "..."</div>
CSS
.ellipsis{
width:200px;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('bindings.xml#ellipsis');//issue for Firefox
}
bindings.xml
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="none">
<content><children/></content>
</binding>
<binding id="ellipsis">
<content>
<xul:label crop="end"><children/></xul:label>
</content>
<implementation>
<field name="label">document.getAnonymousNodes(this)[0]</field>
<field name="style">this.label.style</field>
<property name="display">
<getter>this.style.display</getter>
<setter>if(this.style.display!= val)this.style.display=val</setter>
</property>
<property name="value">
<getter>this.label.value</getter>
<setter>if(this.label.value!=val)this.label.value=val</setter>
</property>
<method name="update">
<body>
var strings= this.textContent.split(/\s+/g)
if(!strings[0])strings.shift()
if(!strings[strings.length-1])strings.pop()
this.value=strings.join('')
this.display=strings.length?'':'none'
</body>
</method>
<constructor>this.update()</constructor>
</implementation>
<handlers>
<handler event="DOMSubtreeModified">this.update()</handler>
</handlers>
</binding>
</bindings>
jQuery를 사용하는 경우 a가 있습니다 훌륭한 플러그인 나는 사용한다.
또는 [이 예제] (404 발견되지 않음!)는 크로스 브라우저에서 작동하는 것 같습니다.
질문이 있으니 댓글에 나를 때려!
404 링크 : http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php
새로운 버전의 CSS (CSS3)에는 text-overflow:ellipsis, 당신을 위해 이것을합니다. 현재 IE 버전 6 이상, Safari 및 Chrome에서 작동합니다. Firefox의 지원은 아니기 때문에 아직 유용한 답변은 아니지만 최선의 방법은 결국 CSS가이를 처리하도록하는 것이라는 점을 명심해야합니다.
CSS3 사양 드래프트 : http://www.w3.org/tr/2001/wd-css3-text-20010517/#text-overflow-props
지원되는 브라우저 : http://www.quirksmode.org/css/contents.html (하단 근처의 "텍스트 오버 플로우"로 스크롤)
간단히 말해서, 해킹에 의지하지 않으면 더 좋은 방법은 없습니다.
예를 들어, 위치 : 절대 범위를 사용하여 실제 컨텐츠 위에 오버플로 : 컨테이너에 숨겨진 세트를 사용하여 "..."를 배치하고 컨테이너 내에 컨텐츠가 맞는 경우에만 추가 범위를 숨 깁니다. 그것은 당신이 당신이 한 번만 잘린 코드를 실행할 수있게 해주었습니다.
개인적으로, 나는 몇 번 더 픽셀 너비 계산을 실행합니다. 텍스트를 설정하고 너비를 읽는 것은 빠른 작동이므로 눈에 띄지 않아야합니다.
사용 text-overflow:ellipsis. IE 전용이 아닙니다 ... 대부분의 주요 브라우저가이를 수행 할 수 있습니다.
하지만 할 수 없다면 다음은 jQuery 플러그인입니다 이것을 위해.
당신이 제기 한 포인트 중 하나에만 대답하려면 :
따라서 20 자이고 맞지 않는 경우 19까지 자르고 엘립스 시스를 추가 한 다음 다시 맞는지 확인해야합니다. 그런 다음 18으로 자르고 (Ellipsis) 다시 시도하십시오. 그리고 다시. 그리고 다시 ... 맞을 때까지. 더 좋은 방법이 있습니까?
올바른 길이를 찾는 훨씬 빠른 방법은 문자열을 반으로 자르고, 맞는지 테스트하는 것입니다. 그렇다면 : 원래 길이의 4 분의 1을 다시 켜고 1/4을 끄지 않으면 그에 맞는지 테스트하십시오. 이 추가/빼기 값이 1보다 작을 때까지 원래 길이의 1/8, 1/16, 1/32th로 재귀 적으로 반복적으로 반복하십시오.
원하는 알고리즘입니다. 몇 단어보다 긴 문자열의 경우 일반적으로 DOM에서 수행해야 할 테스트 수를 10 배로 줄일 수 있습니다.
이 시도:
업데이트:
독점적 인 {Word-Wrap : Break-Word;}를 사용하는 경우 즉, 라인 브레이크를 강제합니다. 최신 브라우저에는 기본값 {Overflow : Visible;}을 가질 수 있으며 컨테이너를 확장하지 않고 올바르게 오버플로됩니다.
아니요, 간단한 작업이 아닙니다. 나는 1 년 전 똑같은 일을해야했고 인터넷 익스플로러 (버전 6에서), 오페라와 사파리조차도 그것을 할 수는 있지만 Firefox는 할 수 없다는 것을 알았습니다. 죄송합니다. 해킹 만 해킹 만 구할 수 있습니다
노력하다 dojox.html.ellipsis
오페라 :
-o-text-overflow:ellipsis;
나는 바뀌었다 this.value=strings.join('') 에게 this.value=strings.join(' ') ~에서 비니 아민대답하고 그것은 나를 위해 잘 작동했습니다!
Firefox 4.0 및 아직 구현되지 않은 정보 text-overflow:ellipsis CSS 속성 :
이것 링크는 문제에 대한 부분 솔루션을 제공합니다.
비슷한 결과를 낳습니다 text-overflow:ellipsis CS 만 사용합니다.
