긴 단어를 CSS로 래핑합니다. CSS 속성을 사용하여 줄 바꿈을 추가하는 방법

집 / 멈춤

인터넷은 콘텐츠로 구성되고 콘텐츠는 단어로 구성되며 단어는 매우 길 수 있습니다. 그리고 조만간 웹마스터는 긴 단어에 하이픈을 넣는 문제에 직면하게 됩니다. 이 문제는 특히 반응형 디자인 및 작은 콘텐츠 블록과 관련이 있습니다. 그러면 이 문제를 어떻게 처리합니까?

하이픈

긴 단어에 하이픈을 넣는 첫 번째 해결 방법은 하이픈을 사용하는 것입니다.

Defisi( -webkit-hyphens: 자동; -moz-hyphens: 자동; -ms-hyphens: 자동; 하이픈: 자동; )

브라우저 지원: CSS 하이픈은 Chrome, Opera, Android를 제외한 거의 모든 최신 브라우저에서 지원됩니다. 또한 문법적으로 잘못된 곳에 하이픈을 삽입하는 경우도 많습니다.

단어 나누기

Wordbreak는 단어 내에서 줄을 나누어야 하는지 여부를 나타내는 CSS 속성입니다.

Obriv-slova( -ms-word-break: 모두 중단; 단어 중단: 모두 중단; 단어 중단: 중단 단어; )

브라우저 지원: 단어 나누기는 Opera Mini 및 이전 버전의 Opera를 제외한 모든 브라우저에서 지원됩니다.

오버플로우 래퍼

다음 해결책은 오버플로 랩을 사용하는 것입니다.

Obertka-perepolneniya(단어 포장: 중단 단어; 오버플로 포장: 중단 단어; )

브라우저 지원: 거의 모든 브라우저에서 지원됩니다. 참고: 일부 브라우저에서는 "overflow-wrap" 대신 "word-wrap"을 사용해야 합니다.

생략

또 다른 옵션은 타원을 사용하는 것입니다.

Multigotochiye( 오버플로: 숨김; 공백: nowrap; 텍스트 오버플로: 줄임표; )

브라우저 지원: 모든 최신 브라우저에서 지원됩니다.

이 방법은 효과가 있지만 이상적이지는 않습니다.

최종 솔루션:오버플로 및 하이픈 래퍼 사용.

Finalnoye-resheniye(overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; 하이픈: auto; )

이 솔루션을 사용하면 이를 지원하는 브라우저에서 하이픈을 삽입할 수 있고 지원하지 않는 브라우저에서는 줄바꿈을 삽입할 수 있습니다.

안녕하세요 여러분, 시작해 보겠습니다. 다음과 같은 텍스트가 있다고 가정해 보겠습니다.

아랍 에미리트 연방 정부와 행정부는 최신 과학 기술 성과를 기반으로 한 모든 최신 기술을 이 도시에 집중하여 마치 공상 과학 소설의 화면에서 바로 나온 것처럼 이 도시를 미래의 도시로 만들려고 노력하고 있습니다. 영화. 이러한 기술에는 로봇 경찰, 로봇 자동차, 하이퍼루프(Hyperloop) 운송 시스템이 포함되며 가까운 시일 내에 자동화된 비행 택시 서비스가 두바이에서 운영되기 시작할 것입니다. 그리고 이 행사를 준비하면서 택시로 사용될 로터 18개를 갖춘 전기 2인승 볼로콥터(Volocopter) 항공기가 자동 모드로 첫 비행을 했다고 그들은 적고 있습니다.

여기에 이제 작업을 시작할 텍스트가 있습니다.

그리고 우리가 고려할 첫 번째 속성은 단어 분리(word-break)입니다.

단어 나누기: 정상 | 모든 것을 유지 | 브레이크 올

우리는 이 일반 속성의 두 가지 값, 즉 기본값과 break-all에 주로 관심이 있으며 이를 통해 단어 줄 바꿈이 문자별로 수행되도록 설정합니다. Keep-all의 경우 이 값은 중국어, 일본어, 한국어의 단어를 래핑하는 데 사용됩니다.

P(단어 나누기: 모두 나누기;. )

이용 후 참고해주세요 이 스타일의모든 텍스트는 사용 가능한 전체 너비로 확장되며 하이픈은 단어가 아닌 문자로 표시됩니다. 이 속성은 지정된 너비에 맞지 않는 매우 긴 단어가 있는 경우 유용할 수 있습니다. 그러나 이것은 주어진 너비에 맞는 단어라도 절대적으로 모든 단어가 문자별로 전송되기 때문에 일종의 불편을 초래합니다.

다행히 문자에 맞지 않는 단어만 전송하는 유사한 속성이 있습니다. 이를 오버플로 랩이라고 합니다.

P( 오버플로 랩: 중단 단어; )

break-word 값을 적용한 후에는 모든 텍스트가 단어 단위로 전송되고 지정된 너비에 맞지 않는 단어는 문자 단위로 전송됩니다. 작업이 완료되었다고 말할 수 있습니다! break-word 값 외에도 이 속성은 다음을 허용합니다.

오버플로 랩: 정상 | 브레이크 단어 | 상속하다;

이제 텍스트의 단어 줄 바꿈을 위한 고급 CSS 속성으로 넘어가겠습니다.

텍스트 자체를 고정 폭으로 변경하지 않고도 pre 태그의 작동을 모방할 수 있는 공백 속성을 고려해 보겠습니다.

공백: 일반 | 지금 랩 | 사전 | 사전 라인 | 사전 포장 | 상속하다

기본적으로 이 속성을 사용하면 텍스트의 공백에만 작업할 수 있습니다. 예를 들어, 텍스트에 다음 스타일을 적용하면:

공백: 지금 랩;

모든 줄 바꿈은 무시되고 텍스트는 한 줄로 표시됩니다.

공백: 사전;

값이 pre이면 모든 줄 바꿈은 소스 코드의 줄 바꿈과 유사합니다. 또한, 텍스트가 지정된 너비에 맞지 않으면 전송되지 않습니다. 전송을 원할 경우 사전 라인 값을 지정해야 합니다.

줄바꿈뿐만 아니라 고려하고 싶다면 소스 코드, 단어 사이의 공백도 포함하는 경우 다음을 지정해야 합니다.

공백: 사전 포장;

이것이 기본적으로 CSS를 사용한 단어 하이픈 넣기에 관해 제가 말씀드리고 싶은 전부입니다. 이 기사가 귀하에게 도움이 되기를 바라며, 얻은 지식을 두 번 이상 활용하시기 바랍니다.

글쎄, 나는 당신에게 작별 인사를합니다. 나는 당신의 성공과 행운을 기원합니다! 안녕!

블라드 메르제비치

인쇄 시 텍스트와 달리 웹 페이지에서는 하이픈이 거의 사용되지 않습니다. 왜냐하면 종이 형식에 엄격하게 얽매이지 않기 때문입니다. 사이트는 다양한 해상도, 다양한 해상도로 다양한 모니터에서 볼 수 있습니다. 운영 체제그리고 브라우저. 이 모든 것이 최종 텍스트가 사용자에게 어떻게 보일지 예측하는 것이 불가능한 조합 조합을 생성합니다. 이 때문에 텍스트는 일반적으로 왼쪽으로 정렬되며 전체 단어에 하이픈이 사용됩니다. 그러나 예를 들어 미적 측면에서 긴 화학 또는 의학 용어가 주어진 너비의 좁은 열에 사용되는 경우와 같이 단어 하이픈 연결이 필요한 경우도 있습니다. HTML 및 CSS 매뉴얼 또는 자동 방법추가할 하이픈이 그리 많지 않으므로 모두 나열하겠습니다.

태그 사용

꼬리표 HTML5에 도입되었으며 필요한 경우 단어 줄 바꿈을 만듭니다. 러시아어 규칙에 따라 하이픈 넣기가 허용되는 위치에는 다음을 삽입합니다. (예 1). 전체 단어가 할당된 너비에 맞으면 이 태그는 어떤 방식으로도 나타나지 않으며 우리는 태그의 존재 여부조차 알 수 없습니다. 단어가 맞지 않으면 브라우저는 태그 위치에 있습니다. 전송을 생성합니다.

예시 1. 태그

환승

하나 열두번째 수업 몽상가 Anzhelika는 학교를 졸업한 후 사업이라는 직업을 선택했습니다. 생산 운전사 엎드린.

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 하이픈이 포함된 텍스트

소프트 전송

애플리케이션 심각한 단점이 있습니다. 그것이 우리 앞에 하이픈인지 아니면 다른 줄에 별도의 단어인지 이해하는 것이 불가능합니다. 이로 인해 문장의 의미가 상실될 수도 있고, 오해를 받을 수도 있습니다. 하이픈 넣기는 타이포그래피 규칙에 따라 이루어져야 합니다. 즉, 줄 끝에 하이픈을 추가합니다. 부드러운 하이픈 넣기는 이에 잘 대처합니다. HTML 코드에는 이를 위한 특수 문자가 있습니다. 태그와 같은 역할을 합니다. - 일반 텍스트에는 표시되지 않으며 하이픈을 추가하는 동안 단어를 다른 줄로 이동합니다(예 2).

예시 2: 소프트 전송

환승

11학년 학생인 안젤리카는 학교를 졸업한 후 비즈니스 드라이버라는 직업을 선택했습니다.

이 예의 결과는 그림 1에 나와 있습니다. 2. 그림과 비교하여 텍스트가 얼마나 미학적으로 더 보기 좋고 명확해 보이는지 확인하십시오. 1.

쌀. 2. 하이픈이 포함된 텍스트

단어 분리 속성

하이픈 생성 프로세스를 자동화하려면 break-all 값과 함께 word-break 속성을 사용합니다(예 3). 더 이상 HTML에 기호나 태그를 추가할 필요가 없습니다. 스타일이 모든 것을 처리합니다.

예 3. 단어 분리 사용

환승

11학년 안젤리카는 학교를 졸업한 뒤 회사원이라는 직업을 선택했다.

이 예의 결과는 그림 1에 나와 있습니다. 3. 이 경우 텍스트 하이픈 넣기 규칙은 고려되지 않으므로 단어에 매우 이상한 방식으로 하이픈이 들어갈 수 있습니다.

쌀. 3. 하이픈이 포함된 텍스트

나열된 모든 방법 중에서 "반 수동"을 사용하는 것이 최상의 결과를 제공합니다. 러시아어 규칙을 따르면 텍스트가 미학적으로 가장 좋아 보입니다. 본문에 긴 단어가 있을 때 사용하세요.

하이픈 속성

그리고 마지막으로 가장 강력하고 편리한 속성은 자동 추가하이픈 - 하이픈. 해당 작업은 브라우저에 내장된 하이픈 넣기 사전을 기반으로 하므로 최상의 결과를 제공합니다. IE10, Firefox, Android 및 iOS에서 지원됩니다. 크롬과 오페라는 지원하지 않습니다. 이것이 작동하려면 태그에 대해 값이 ru인 lang 속성을 추가합니다(예 4).

예 4: 하이픈 사용

환승

11학년 안젤리카는 학교를 졸업한 뒤 회사원이라는 직업을 선택했다.

이 예의 결과는 그림 1에 나와 있습니다. 4.

쌀. 4. 하이픈이 포함된 텍스트

양도 금지

종종 반대 작업이 발생합니다. 즉, 언어 규칙에 따라 허용되지 않는 곳에서 하이픈을 금지하는 것입니다. 예를 들어, 측정 단위를 숫자(10ml), 연도 지정(기원전 54년), 성의 이니셜, 안정적인 약어 끊기 등을 분리할 수 없습니다. 브라우저가 하이픈을 추가하는 것을 방지하려면 공백이 있는 경우에는 잘림 방지 공백으로 바꿔야 합니다(예 5).

예시 5: 사용법

환승

좌표 70° 58′ 19″ N에 있는 호수. w. 97° 24′ 5″ E. Taimyr Dolgano-Nenets 지역에 위치크라스노야르스크 영토

러시아 제국.

공백 속성은 단어 사이의 공백을 표시하는 방법을 지정합니다. 일반적인 상황에서는 HTML 코드의 공백이 웹 페이지에서 하나로 표시됩니다. 예외는 요소입니다. 

, 이 컨테이너에 배치된 텍스트는 사용자가 포맷한 대로 모든 공백과 함께 출력됩니다.  따라서 공백은 작업을 시뮬레이션합니다. 
하지만 이와 달리 글꼴을 고정폭으로 변경하지는 않습니다.
간략한 정보
명칭

설명예

<тип>
값의 유형을 나타냅니다.<размер>


A && B값은 지정된 순서대로 출력되어야 합니다.<размер> && <цвет>


A |  비제안된 값(A 또는 B) 중에서 하나의 값만 선택해야 함을 나타냅니다.정상 |  작은 대문자

||  비각 값은 독립적으로 사용하거나 순서에 관계없이 다른 값과 함께 사용할 수 있습니다.너비 ||  세다


그룹 값.[ 자르기 ||  십자가 ]

*
0회 이상 반복합니다.[,<время>]*


+
한 번 이상 반복합니다.<число>+


?
지정된 유형, 단어 또는 그룹은 선택 사항입니다.삽입?

(A, B)A회 이상, B회 이하로 반복하세요.<радиус>{1,4}


#
쉼표로 구분하여 한 번 이상 반복합니다.<время>#


×
 
가치
일반 브라우저 창의 텍스트는 평소와 같이 표시되며 줄 바꿈은 자동으로 설정됩니다.  nowrap 공백은 고려되지 않으며, HTML 코드의 줄 바꿈은 무시되고, 모든 텍스트는 한 줄에 표시됩니다.  동시에 추가 
텍스트를 새 줄로 바꿉니다.  pre 개발자가 HTML 코드에 추가한 모든 공백과 하이픈을 고려하여 텍스트가 표시됩니다.  줄이 너무 길어서 브라우저 창에 맞지 ​​않으면 가로 스크롤 막대가 추가됩니다.  텍스트에서 앞줄 공백은 고려되지 않습니다. 텍스트가 지정된 영역에 맞지 않으면 자동으로 다음 줄로 이동됩니다.  pre-wrap 모든 공백과 구분선은 텍스트에 유지됩니다. 그러나 줄 너비가 지정된 영역에 맞지 않으면 텍스트가 자동으로 다음 줄로 줄바꿈됩니다.
텍스트에 대한 값의 효과가 표에 나와 있습니다.  1.
예


 
 
 공백
 
 
 
 
예

 

 
 
 페르마의 마지막 정리

 엑스 N+ Y N= Z N
여기서 n은 2보다 큰 정수입니다.
 
 

 


이 예의 결과는 그림 1에 나와 있습니다.  1.
쌀.  1. 공백 속성 적용
객체 모델
물체.style.whiteSpace
메모
브라우저 인터넷 익스플로러버전 7.0까지는 pre-line 및 pre-wrap 값을 지원하지 않습니다.  을 위한