CSS 단어 줄 바꿈/줄 바꿈 공백 및 하이픈 이외에

Question

내 HTML 서식이 오버플로되는 원인이되는 파일 이름이 너무 길어요. 이 모든 파일 이름은 공백 대신 밑줄을 사용하며 공백 인 경우 쉽게 줄 바꿈/줄 바꿈을합니다. 이렇게

Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf

가 공백이나 하이픈 것처럼 CSS 텍스트에 밑줄을 치료하기 위해 말해, 따라서/너무 밑줄이에 침입 포장하는 몇 가지 방법이 있나요? 이렇게

Here_is_an_example_of_a_really_long_
file_name_that_uses_underscores_
instead_of_spaces.pdf 내 목적을 위해

, 나는이 작업을 수행하는 스크립트를 사용할 수 없습니다. 또한 단어 감싸기를 사용하고 싶지는 않습니다 : break-word trick은 너비를 지정하지 않아도 작동하지 않기 때문입니다. 또한 단어 중간에 임의로 끊어집니다.

감사합니다.

Answer 1

브라우저를 배치 할 때 브라우저가 깨지는 <wbr> 태그 (http://www.quirksmode.org/oddsandends/wbr.html)를 사용할 수 있습니다.

그래서 HTML은 다음과 같아야합니다

Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>... 

당신은 당신이 출력 HTML 전에 서버 측에이 태그를 추가 할 수 있습니다.

다른 대안으로는 너비가 0 인 엔터티 ​이 있습니다. 때로는 특정 브라우저에서 더 잘 작동합니다.

Answer 2

당신이 현재 이러한 목적을 위해 CSS를 사용할 수 없습니다 것 같다

jsfiddle - code

word-break: break-all

, result

Answer 3

사용 CSS.

하지만 예를 들어, 자동으로 <wbr> 태그를 추가 자바 스크립트를 사용할 수 있습니다 : 당신이 <span> </span>을 삽입 할 수 <wbr> 자바 스크립트도를 사용하지 않고

var arr = document.getElementsByClassName('filename'); 
 
for(var i = 0; i < arr.length; i++) { 
 
    arr[i].innerHTML = arr[i].innerHTML.replace(/_/g, '_<wbr/>'); 
 
}

body { width: 250px; }

<a class="filename">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</a>

Answer 4

다음 CSS를합니다 (공간 통지) :

span{ 
    width: 0; 
    overflow: hidden; 
    display: inline-block; 
} 

마크 업이 새로운 HTML5 태그입니다

Here_<span> </span>is_<span> </span>an_<span> </span>example...