"쪼갤"긴 단어

나는 기본적으로 반응하는 트위터 부트 스트랩을 사용하는 클라이언트의 반응 형 웹 사이트를 만들고 있습니다. 그러나 단어가 <h1>에서 너무 길어지면 모바일 크기의 브라우저에 맞지 않습니다."쪼갤"긴 단어

내가하고 싶은 것은 "thisisa-verylongword"를 "thisisa-verylongword"로 바꾸고 마지막 줄을 새 줄로 바꾸는 것입니다.

자바 스크립트로이를 수행하는 간단한 방법이 있습니까? 나는 "$ word가 $ body보다 넓 으면"또는 이와 비슷한 것을 생각하고 있습니다. 모든 단어에 대해 동일한 코드가 작동하면 모든 도움말이 매우 유용합니다.

출처

2013-06-14 justanotherhobbyist

당신은 (실험) CSS 속성 hyphens 사용할 수 있습니다

h1 { 
    -webkit-hyphens: manual; 
    -moz-hyphens: manual; 
     -ms-hyphens: manual; 
      hyphens: manual; 
}

을 특수 유니 코드 문자를 사용하여 줄 바꿈을 지정

U + 2010 (하이픈)
을
"하드"하이픈 문자는 눈에 보이는 줄 바꿈 기회를 나타냅니다. 그 시점에서 라인이 실제로 깨지지 않아도, 하이픈은 여전히 렌더링됩니다.

U + 00AD (SHY)

보이지 않는, "소프트"하이픈. 이 문자는 시각적으로 렌더링되지 않습니다. 대신 브라우저가 필요한 경우 단어를 구분할 수있는 위치를 제안합니다. HTML에서는 을 사용하여 부드러운 하이픈을 삽입 할 수 있습니다.

MDN reference

Browser compatibilty

편집이 작동하도록 word-break: break-all을 설정하는 데 필요한 수 있습니다 @hustlerinc에서 언급 한 바와 같이

출처

2013-06-14 12:36:43 Sirko

단어 분리를 살펴보십시오 http://css-tricks.com/almanac/properties/w/word-break/ too –

단어 분리를 추가 할 때까지 작동하는 데 문제가 발생했습니다. ; CSS 트릭 링크에서. 누군가가 같은 문제에 부딪혔을 때 당신은 그것을 답에 추가하고 싶을 것입니다. – justanotherhobbyist

나는이 목적에 잘 들어 맞는 jQuery 플러그인을 작성했다. ellipsis.js을 확인하십시오. 작동해야 다음과 같은 구성을 사용하여 :

$('h1').ellipsis({visible: 10, more: '…', separator: '', atFront: false})

나는이 방법을 수행하는 장점을 추측하는 것은 그들이 원하는 경우 사용자가 여전히 탭에 전체 헤더를 표시 할 수 있다는 것이다.

CSS를 약간 사용하면 분명히 text-overflow 속성을 얻을 수 있습니다. 아마이 사건의 티켓 일 겁니다. JS가 필요하지 않습니다. :)

출처

2013-06-14 12:35:15

이, 최후의 수단으로 작동 할 수 있지만 특정 단어 및 번거 로움없이 볼 수 있어야 (난 그냥 헤더를 재구성 할 수없는 이유는) 마케팅 목적이있다. 그것을 숨기지 않는 방법이 있다면 고맙겠습니다. 청중은 컴퓨터에 정통하지 않습니다. – justanotherhobbyist

유효한 포인트. 좀 더 역동적 인 것이 필요할지도 모릅니다. 이 문제에 대한 훌륭한 CSS 기반 솔루션이 있기를 바랍니다. :) –

혼자서해야한다고 생각합니다.

"split"기능을 사용하면 문자열을 단어 테이블로 분할 할 수 있습니다. 그런 다음 모든 단어를 for로 확인할 수 있습니다.

출처

2013-06-14 12:36:05

CSS 속성 word-break을 hyphenate으로 설정할 수 없습니까?

예를 here

출처

2013-06-14 12:39:01

"쪼갤"긴 단어

답변

관련 문제