텍스트 레이아웃에는 언어에 따라 일부 형식 요구 사항이 있습니다. 예를 들어, 단순화 된 중국인의 쉼표 및 세미콜론과 같은 구두점은 선의 시작 부분에 나타나지 않습니다. 영어의 경우 전체 단어가 두 줄에 표시되지 않습니다. 브라우저는 이와 같은 원칙에 따라 텍스트를 표시합니다. 그러나 웹 페이지에는 너비 제한이 있기 때문에 연속 및 긴 글자, 숫자 또는 구두점 마크는 예제 1에 표시된 것처럼 페이지 비전에 영향을 미치는 영역의 폭의 한계를 초과합니다.이 문제는 사용자 입력 정보를 표시 할 때 특히 두드러집니다. 여기서 우리는이 문제를 해결하는 방법에 대해 이야기하고 있습니다.
CSS3 드래프트 에서이 문제를 해결하기 위해 두 개의 새로운 속성 단어 랩과 워드 브레이크가 텍스트 처리에 추가됩니다.
다음은 일반 브라우저의 지원 상황입니다.
| IE6/7 [1] | Firefox2/3 [2] | OPERA3+ | Safari9.5+/Chrome | |
|---|---|---|---|---|
| {Word-Wrap : Break-Word;} | TD 요소의 너비를 설정해야합니다. 예 4 및 예 5를 참조하십시오 | 지원되지 않습니다 | 지원되지 않습니다 | 지원되는 TD 요소가 아닙니다 예 4 및 예 5를 참조하십시오 |
| {Word-Break : Break-All;} | 연속 기호는 지원되지 않습니다 예 3 참조 | 지원되지 않습니다 | 지원되지 않습니다 | 지원하다 |
<meta content="IE=7" http-equiv="X-UA-Compatible" /> 를 선언하는 좋은 방법입니다.{Word-Break : Break-All;}는 영어와 수치의 심각한 가독성을 유발하고 연속적인 기호를 감싸지 못하기 때문에 {Word-Wrap : Break-Word;}는 비교적 좋은 선택입니다.
그러나 브라우저의 지원이 좋지 않은 경우 JavaScript를 사용하지 않고는이 문제를 해결할 수 없습니다. 즉, 브라우저가 CSS 솔루션을 지원하지 않을 때 연속 문자열의 적절한 위치에 "8203"문자를 삽입 할 때 (물론 <wbr /> 및 "Shy;
function fnBreakWordAll(o){var o = o || {},
iWord = O. Word || 13,
IRE = O.RE || '[a-za-z0-9],
Ball = O.ALL || 거짓,
sclassname = O.classname || 'Word-Break-all',
AELS = O.ELS || (기능(){
var aels = [],
aallels = document.getElementsByTagName ( '*'),
re = new regexp ( '(? :^| | // s +)' + sclassname + '(? : // s + | $)');
for (var i = 0, ilen = aallels.length; i <ilen; ++ i) {
if (re.test (aallels [i] .className)) {
AELS [AELS.LENGTH] = ALLELS [I];
}
}
반환 ael;
}) () || [],
fnbreakword = function (oel) {
// http://www.hedgerwow.com/360/dhtml/css-word-break.html을 기반으로 수정하십시오
if (! oel || oel.nodeType! == 1) {
거짓을 반환합니다.
} else if (oel.currentStyle && typeof oel.currentStyle.wordwrap === 'String') {
breakword = function (oel) {
OEL.RUNTIMESTYLE.WORDWRAP = 'BREAK-WORD';
진실을 반환하십시오.
}
return breakword (OEL);
} else if (document.createtReewalker) {
var trim = function (str) {
str = str.replace (/^/s/s*/, '');
var ws = // s/,
i = str.length;
while (ws.test (str.charat (-i));
return str.slice (0, i + 1);
}
breakword = function (oel) {
var dwalker = docum
var node, s, c = string.fromcharcode ( '8203'),
// re =/([a-za-z0-9] {0,13})/;
re = new regexp ( '(' + irire + '{0,' + iword + '})');
while (dwalker.nextnode ()) {
노드 = dwalker.currentNode;
s = trim (node.nodevalue) .split (re) .join (c);
node.nodevalue = s;
}
진실을 반환하십시오.
}
return breakword (OEL);
}
};
for (var i = 0, n = aels.length; i <n; ++ i) {
var sua = navigator.useragent,
stn = aels [i] .tagname.tolowercase ();
if ((/opera/). test (sua) || (/firefox/).test(sua) || ((/khtml/).test(sua) &&
(stn === 'td'|| stn === 'th')) || 공){
fnbreakword (Aels [i]);
}
}
}
특정 응용 프로그램은 데모 예제를 참조하십시오
fnwordbreakall 함수는 몇 가지 사용자 정의 매개 변수를 제공하며 사용 방법과 매개 변수는 다음과 같습니다.
fnWordBreakAll({word:15,re:'[//w]',all:true});| 매개 변수 | 값 | 설명 |
|---|---|---|
| 단어 | 양의 정수, 기본값은 13입니다 | 이 단어 수의 단어는 /u8203에 삽입되지 않습니다. 내 인상에 13 글자가 넘는 단어가 많지 않아 대부분의 단어가 깨지지 않도록 할 수 있습니다. |
| 답장 | 정규 표현, 기본값 [A-ZA-Z0-9] | 단어가 구성되는 문자를 결정하기위한 단어의 정기적 인 표현, 탈출에주의를 기울이십시오. |
| 모두 | 부울 값, 기본 거짓 | Opera 및 Firefox에서 기본적으로 모든 브라우저에서 실행되는지 여부를 결정하고 Th 또는 TD의 Safari에서 클래스 응용 프로그램이 실행되면 주로 .word-break-all이 정의되지 않을 때 사용되면 즉, 즉 스타일을 추가합니다. |
| 클래스 이름 | 법률 클래스 이름, 기본 단어 차단 | 실행 함수 요소의 해당 속성 이름 |
이 함수의 핵심 부분은 Hedger Wang에서 수정되었습니다. JavaScript 솔루션 "크로스 브라우저 워드 브레이커"가 컴파일되었습니다. 문서를 사용합니다 .CreatetReeWalker 및 분할 방법을 사용하여 비 EIE 브라우저의 각 문자에 "#8203"을 추가합니다. 기본적으로 순수한 중국어 텍스트로 사용될 때는 아무런 문제가 없지만, 그가주는 예제를 관찰하면 텍스트에 영어 나 숫자가있을 때 라인 브레이크 문제를 해결하더라도 텍스트를 읽기 어렵게 만들고 문자 간 간격을 높이기 때문에이를 기반으로 위의 개선 사항을 만들었습니다.