2013-05-11 5 views
5

어쩌면 이것은 가능하지 않지만 단어를 깨기 전에 긴 문자열의 끝에 하이픈을 자동으로 삽입하는 방법이 있는지 궁금합니다. 이 jsfiddle은 제가 가지고있는 문제를 보여줍니다. 고맙습니다.단어 분리 전에 하이픈을 추가하십시오.

table { 
     width:200px; 
     word-wrap:break-word; 
     table-layout: fixed; 
     } 

<table> 
    <td>Pneumonoultramicroscopicsilicovolcanoconiosis</td> 
</table> 

답변

4

저는 최선의 방법은 자바 스크립트 솔루션이라고 생각합니다.

  • 은 당신이 원하는 것을 정확히하지 않는다 (적어도 아직 모든 브라우저에서) 내가 생각하는, CSS3에서 hyphens 특성이있다,하지만 흥미로운 일이 될 수도, 당신은 그것을 here 또는 here에 읽을 수 있습니다.

  • 또는 여기 그들은 조금을 너무 논의하고 자바 스크립트 플러그인을 하이픈 붙이기 언급이 일부 도움이 wordwrap a very long string

희망을.

+0

매우 유용합니다. 감사합니다. – user2014429

3

웹킷 브라우저의 경우이 작업을해야합니다 :

table 
{ 
    width: 200px; 
    word-break: break-word; 
    -webkit-hyphens: auto; 
} 

이 아이폰 OS 크롬에 나를 위해 작동하지만 OS X 크롬. This 블로그 게시물은 다른 브라우저를위한 해결책을 설명합니다. OS X Chrome에서도 여전히 저에게는 효과가 없었습니다.

가 도시 해결책은 다음과 같습니다

table 
{ 
    -ms-word-break: break-all; 
    word-break: break-all; 

    // Non standard for webkit 
    word-break: break-word; 

    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 
} 

이, 당신이 필요로하는 브라우저에서 작동 hyphenator 확인하지 않는 경우 - 더 나은 당신이 필요로하는 무엇을 달성 할 수있는 자바 스크립트 유틸리티를.

+0

정보를 제공해 주셔서 감사합니다. – user2014429

+2

벤, 당신은 기본적으로 제가 한 같은 제안을 적었습니다. 그럴 가능성이 높습니다 ;-) 다른 브라우저에서'하이픈 '을 테스트했는데 그 결과에 일관성이 없었습니다. 응답에서 제공 한 두 번째 링크도 호환성 테이블 https : //developer.mozilla를 제공합니다 .org/en-US/docs/Web/CSS/하이픈? redirectlocale = en-US 및 redirectslug = CSS/하이픈 # Browser_compatibility 그래서 예 ... 나는 하이픈이 더 넓게 지원 될 때까지 갈 방법이라고 생각합니다. . –

0

이 피들을 참조하십시오, 작동 할 수 있습니다.

`http://jsfiddle.net/76qBy/` 
+1

이것은 jsfiddle이 게시 한 원래 버전입니다. '/'다음에 업데이트 버전 번호를 추가하는 것을 잊어 버린 것 같습니다. – user2014429

+0

네, 죄송합니다. – dsfg

관련 문제