2013-10-04 2 views
1

저는 CSS를 사용하여 특정 단어를 어기려고합니다.CSS를 사용하여 특정 단어에 단어 나누기 사용

단어는 "판매/텔레 마케팅"이고, "/ tele"부분 다음에 단어를 끊으려고합니다. 나는 <br>을 사용하는 것을 피하려고합니다. 단락 태그의 레이아웃에 영향을 미칠 수 있습니다.

CSS를 사용하여 문제를 해결할 수있는 방법이 있습니까?

답변

0

난 당신이 <br>을 피하려고했다 알고 있지만 <wbr> 있습니다 .. 사용 예제

jsfiddle demo

: 당신이 p 크기를 다시 경우

<p>some random text and stuff sales/tele<wbr>marketing some more words here</p> 

, 단어 것 tele 후에 깨십시오. 이 IE10에서 지원되지 않는

See MDN

슬프게도, <wbr> 제한적으로 지원이있다.


난 그냥 임의의 CSS 대안을 생각 ..

jsFiddle demo

HTML

<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p> 

CSS

,210

기본적으로, 당신은 단지 단어를 텔레을 선택하면 .. 그러므로 새로운 라인으로 나누기, 텔레 뒤에 공백을 포함, 당신은 .. 좋지 않은 공간을 제거 할 수 있습니다 -하지만 그럼에도 불구하고 작동합니다.

+0

''시도했지만 그것에 대해 살펴본 후에 대안 '​'을 대신 사용했습니다. – marchemike

+0

''이 광범위하게 지원됩니다. 특히'wbr : after {content : "\ 200B"; }'을 스타일 시트에 추가하십시오. 그러나 a * 단어가 하이픈을 추가하지 않고 끊어지기 때문에 두 줄로 나눌 수 있다고 지정하는 것은 잘못된 도구입니다. 그리고 '​'(실제로 캐릭터 레벨의 카운터 파트)을 사용하면 같은 문제가 발생합니다. –

+0

@ JukkaK.Korpela 나는 이것에 대해 부정적인 것을 게시하기를 기다리고 있었다. - 또 하나의 downvote에 감사한다. –

0

CSS에서 단어 분리 점을 지정할 수 없습니다 (인위적인 방법을 제외하고는 올바른 방법의 에뮬레이션이 신뢰할 수 없습니다).

sales/tele&shy;marketing 

당신은 같은 단어의 경우에 다른 하이픈 힌트를 추가 할 수 있습니다 대신, 하이픈 힌트, 소프트 하이픈, U + 00AD를 포함하거나 직접 입력하여 어떻게가 알고있는, 또는 참조 &shy;를 사용하는 경우 너는 좋아한다. / 다음에 <wbr>을 추가하여 허용되는 직접 중단 점을 지정할 수 있습니다 (문자열이 구분되는 경우 하이픈이 표시되지 않음).