긴 단어가 내 div를 깨는 것을 방지하는 방법은 무엇입니까?
TABLE-layout에서 DIV-layout으로 전환 한 이후로 한 가지 일반적인 문제가 남아 있습니다.
문제 : 동적 텍스트로 DIV를 채우고 필연적으로 div 열의 가장자리 위로 확장되어 사이트가 비전문적 인 것처럼 보이게하는 매우 긴 단어가 있습니다.
RETRO-WHINING : 테이블 레이아웃에서는 이런 일 이 발생 하지 않았습니다 . 표 셀은 항상 가장 긴 단어의 너비까지 넓게 확장됩니다.
심각도 : 가장 중요한 사이트, 특히 "한계"와 같은 일반적인 단어가 매우 긴 독일어 사이트 ( "Geschwindigkeitsbegrenzung")에서도이 문제가 발생합니다.
누구든지 이것에 대한 실용적인 해결책이 있습니까?
소프트 하이픈
소프트 하이픈 ( ­) 을 삽입하여 브라우저에 긴 단어를 나눌 위치를 지정할 수 있습니다 .
averyvery­longword
로 렌더링 될 수 있습니다
매우 긴 단어
또는
매우
긴 단어
좋은 정규 표현식을 사용하면 필요한 경우가 아니라면 삽입하지 않을 수 있습니다.
/([^\s-]{5})([^\s-]{5})/ → $1­$2
브라우저와 검색 엔진은 텍스트를 검색 할 때이 문자를 무시할만큼 영리하며, 다른 사람을 테스트하지 않은 Chrome 및 Firefox는 텍스트를 클립 보드에 복사 할 때이를 무시합니다.
<wbr> 요소
또 다른 옵션은 HTML5로<wbr> 된 이전 IE-ism 을 삽입 하는 것입니다 .
averyvery<wbr>longword
하이픈없이 나누기 :
매우
긴 단어
너비가 0 인 공백 문자 ​(또는 ​)를 사용 하여 동일한 결과를 얻을 수 있습니다 .
참고 로 최신 IE, Firefox 및 Safari ( 현재 Chrome은 아님)에서 지원하는 CSShyphens: auto 도 있습니다 .
div.breaking {
hyphens: auto;
}
그러나 하이픈 넣기 (hyphenation)는 하이픈 딕셔너리 사전을 기반으로하므로 긴 단어를 깰 수는 없습니다. 그래도 정당한 텍스트를 더 예쁘게 만들 수 있습니다.
레트로 솔루션
<table>레이아웃은 좋지 않지만 display:table다른 요소에는 좋습니다. 구식 테이블만큼 기발하고 신축성이 있습니다.
div.breaking {
display: table-cell;
}
overflow그리고 white-space: pre-wrap아래의 답변이 너무 좋다.
두 가지 수정 사항 :
overflow:scroll-이것은 디자인 비용으로 콘텐츠를 볼 수있게합니다 (스크롤바는보기 흉함)overflow:hidden오버플로를 차단합니다. 그것은 사람들이 내용을 읽을 수 없다는 것을 의미합니다.
(SO 예제에서) 패딩과 겹치지 않게하려면 패딩 내부에 내용을 담기 위해 다른 div를 만들어야 할 것입니다.
편집 : 다른 답변 상태로, 단어를 자르는 다양한 방법이 있습니다. 클라이언트 측에서 렌더링 너비를 계산하는 것입니다 (이 서버 측은 절대로 안정적으로 작동하지 않으므로 플랫폼 간). JS 및 구분 문자 삽입 또는 비표준 및 / 또는 word-wrap: break-word 거의 호환되지 않는 CSS 태그 사용 ( Firefox에서는 작동하지 않는 것으로 나타남 )
그래도 항상 오버플로 설명자가 필요합니다. div에 너무 넓은 블록 유형의 콘텐츠 (이미지, 테이블 등)가 포함되어 있으면 레이아웃 / 디자인을 파괴하지 않도록 오버플로가 필요합니다.
따라서 다른 방법 (또는 그 조합)을 사용해야하지만 오버플로도 추가해야 모든 브라우저를 포괄 할 수 있습니다.
2를 편집하십시오 (아래 의견을 처리하십시오).
CSS overflow속성을 사용하여 시작하는 것은 완벽하지는 않지만 디자인 중단을 막습니다. overflow:hidden먼저 신청하십시오 . 오버플로는 패딩에서 깨지지 않으므로 중첩 div또는 테두리를 사용하십시오 (가장 적합한 방법).
넘쳐나는 내용을 숨기므로 의미를 잃을 수 있습니다. 을 사용 overflow:auto하거나 overflow:scroll대신에 스크롤 막대를 사용할 수 overflow:hidden있지만 div의 크기와 디자인에 따라 모양이 좋지 않거나 제대로 작동하지 않을 수 있습니다.
이 문제를 해결하기 위해 JS를 사용하여 작업을 다시 가져 와서 일부 형태의 자동 자르기를 수행 할 수 있습니다. 나는 당신을 위해 의사 코드를 작성하는 중반 쯤되었지만 반쯤 진행되면 심각하게 복잡해집니다. 가능한 한 많이 표시해야하는 경우 하이픈에주의를 기울 이십시오 ( 아래 언급 됨 ).
이것은 사용자의 CPU 비용으로 발생합니다. 페이지를로드하거나 크기를 조정하는 데 시간이 오래 걸릴 수 있습니다.
우리가 알고 있듯이 이것은 복잡한 문제이며 브라우저간에 일반적인 방식으로 지원되지 않습니다. 대부분의 브라우저는이 기능을 기본적으로 지원하지 않습니다.
사용자 컨텐츠가 사용되었지만 HTML을 지원하지 않는 HTML 이메일로 수행 된 일부 작업에서 간격이없는 컨텐츠 블록 주위의 래퍼에있는 다음 CSS 비트는 최소한 어느 정도 도움이되어야합니다.
.word-break {
/* The following styles prevent unbroken strings from breaking the layout */
width: 300px; /* set to whatever width you need */
overflow: auto;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
-moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}
Mozilla 기반 브라우저의 경우 위에서 언급 한 XBL 파일에는 다음이 포함됩니다.
<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
More information on XBL:
http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference
Example of implementing the CSS 'word-wrap' feature:
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
-->
<binding id="wordwrap" applyauthorstyles="false">
<implementation>
<constructor>
//<![CDATA[
var elem = this;
doWrap();
elem.addEventListener('overflow', doWrap, false);
function doWrap() {
var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
while (walker.nextNode()) {
var node = walker.currentNode;
node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
}
}
//]]>
</constructor>
</implementation>
</binding>
</bindings>
불행히도 Opera 8+는 위의 솔루션을 좋아하지 않는 것 같습니다. 따라서 JavaScript는 Mozilla / Firefox와 같은 브라우저를위한 솔루션이어야합니다. Opera의 최신 버전을 포함하는 또 다른 크로스 브라우저 솔루션 (JavaScript) Hedger Wang의 스크립트를 사용하는 것이 좋습니다 : http://www.hedgerwow.com/360/dhtml/css-word-break.html
다른 유용한 링크 / 생각 :
불일치 한 Babble»블로그 아카이브»Mozilla / Firefox 용 CSS 단어 줄 바꿈
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
[OU] Opera에서 줄 바꿈 없음, IE에서 잘 표시됨
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- users / 2004-November / 024468.html
CSS 크로스 브라우저 워드 랩
.word_wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
스타일을 사용하십시오 word-break:break-all;. 테이블에서 작동한다는 것을 알고 있습니다.
지원하는 브라우저에서 word-wrap: break-word작동하지 않습니까?
스타일 시트의 본문 정의에 포함 된 경우 전체 문서에서 작동해야합니다.
오버플로가 좋은 해결책이 아니라면 사용자 정의 자바 스크립트 만 인공적으로 긴 단어를 나눌 수 있습니다.
참고 :이 <wbr>단어 나누기 태그도 있습니다. 이것은 브라우저가 라인을 분할 할 수있는 지점을 제공합니다. 불행히도이 <wbr>태그는 모든 브라우저에서 작동하지 않으며 Firefox 및 Internet Explorer에서만 작동합니다 (CSS 트릭을 사용하는 Opera).
IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows 및 Safari를 방금 확인했습니다.
word-wrap: break-word;
너비가 설정되어 있고 CSS에 오버플로가 선언되지 않은 div 내부의 긴 링크에서 작동합니다.
#consumeralerts_leftcol{
float:left;
width: 250px;
margin-bottom:10px;
word-wrap: break-word;
}
비 호환성 문제가 보이지 않습니다
방금 이 질문 에서 하이픈 넣기 에 대해 알게되었습니다 . 문제가 해결 될 수 있습니다.
많은 싸움을 한 후 이것이 나를 위해 일한 것입니다.
.pre {
font-weight: 500;
font-family: Courier New, monospace;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
최신 버전의 Chrome, Firefox 및 Opera에서 작동합니다.
나는 white-space다른 사람들이 제안한 많은 속성을 배제 했습니다. 실제로 pre들여 쓰기 가 중단 되었습니다.
고정 크기가없고 동적 내용이있는 div에서 다음을 사용하여 작동했습니다.
display:table;
word-break:break-all;
이 주석 에서 정규 표현식을 다시 사용하면 좋지만 공백이 아닌 하이픈 문자 5 개 그룹 사이에만 부끄러운 하이픈을 추가합니다. 이렇게하면 마지막 그룹이 의도 한 것보다 훨씬 길어집니다. 그 뒤에 일치하는 그룹이 없기 때문입니다.
예를 들어,
'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')
...이 결과는 다음과 같습니다.
abcde­12345678901234
이 문제를 피하기 위해 긍정적 인 예견을 사용하는 버전이 있습니다.
.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')
...이 결과로 :
abcde­12345­67890­1234
내가이 문제에 일반적으로 사용하는 솔루션은 IE와 다른 브라우저에 대해 두 가지 다른 CSS 규칙을 설정하는 것입니다.
word-wrap: break-word;
IE에서 완벽하게 작동하지만 자동 줄 바꿈 은 표준 CSS 속성이 아닙니다. Microsoft 고유의 속성이며 Firefox에서는 작동하지 않습니다.
Firefox의 경우 CSS 만 사용하는 가장 좋은 방법은 규칙을 설정하는 것입니다.
overflow: hidden;
줄 바꿈하려는 텍스트가 포함 된 요소의 경우 텍스트를 감싸지는 않지만 컨테이너의 한계를 넘어서는 텍스트 부분을 숨 깁니다 . 모든 텍스트를 표시하는 데 필수적이지 않은 경우 좋은 해결책이 될 수 있습니다 (예 : 텍스트가 <a>태그 안에있는 경우 ).
업데이트 : CSS에서 이것을 처리하는 것은 놀랍도록 간단하고 오버 헤드가 적지 만 중단이 발생할 때 제어 할 수는 없습니다. 신경 쓰지 않거나 데이터가 자연스럽게 중단되지 않고 긴 영숫자 실행이 있으면 좋습니다. 우리는 긴 파일 경로, URL 및 전화 번호가 많았으며 모두 다른 곳보다 침입하기가 훨씬 낫습니다.
우리의 해결책은 먼저 정규식 대체를 사용하여 공백이 아닌 15 자 또는 공백을 선호하는 특수 문자 중 하나 (예 : 15 자)마다 너비가없는 공백 (& # 8203;)을 넣는 것입니다. 그런 다음 특수 문자 다음에 너비가 0 인 공백을두기 위해 다른 대체 작업을 수행합니다.
너비가 0 인 공간은 화면에 표시되지 않기 때문에 좋습니다. 부끄러운 하이픈은 데이터에 중요한 하이픈이 있기 때문에 혼란 스러웠습니다. 브라우저에서 텍스트를 복사 할 때 너비가 0 인 공백도 포함되지 않습니다.
현재 사용중인 특수 구분 문자는 마침표, 슬래시, 백 슬래시, 쉼표, 밑줄, @, | 및 하이픈입니다. 하이픈 다음에 줄 바꿈을 장려하기 위해 어떤 조치도 취할 필요는 없다고 생각하지만 Firefox (최소 3.6 및 4)는 전화 번호와 같은 숫자로 둘러싸인 하이픈에서 그 자체로 중단되지 않습니다.
또한 사용 가능한 레이아웃 공간을 기준으로 인공 나누기 사이의 문자 수를 제어하려고했습니다. 그것은 긴 비정규 실행과 일치하는 정규식이 역동적이어야한다는 것을 의미했습니다. 이것은 많이 불려지고 성능상의 이유로 동일한 동일한 정규 표현식을 반복해서 만들고 싶지 않기 때문에 정규 표현식과 그 플래그로 키가 지정된 간단한 정규 표현식 캐시를 사용했습니다.
코드는 다음과 같습니다. 유틸리티 패키지의 함수 네임 스페이스는 아마도 다음과 같습니다.
makeWrappable = function(str, position)
{
if (!str)
return '';
position = position || 15; // default to breaking after 15 chars
// matches every requested number of chars that's not whitespace or one of the special chars defined below
var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
return str
.replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
.replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen
cachedRegex = function(reString, reFlags)
{
var key = reString + (reFlags ? ':::' + reFlags : '');
if (!cachedRegex.cache[key])
cachedRegex.cache[key] = new RegExp(reString, reFlags);
return cachedRegex.cache[key];
};
cachedRegex.cache = {};
다음과 같이 테스트하십시오.
makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')
2 업데이트 : 사실 제로 폭 공간이 나타납니다 되는 적어도 어떤 상황에서 복사 한 텍스트에 포함, 당신은 단지 그들을 볼 수 없습니다. 분명히 사람들에게 숨겨진 문자가있는 텍스트를 복사하도록 장려하는 것은 문제를 일으킬 수있는 다른 프로그램이나 시스템에 입력 한 것과 같은 데이터를 갖도록 초대하는 것입니다. 예를 들어, 데이터베이스에서 종료되면 검색에 실패하고 이와 같은 검색 문자열도 실패 할 수 있습니다. 이와 같이 데이터를 이동하기 위해 화살표 키를 사용하려면 보이지 않는 캐릭터를 이동할 수있는 추가 키 누르기가 필요합니다. 사용자가 알아 차리면 다소 기괴합니다.
닫힌 시스템에서는 입력시 해당 문자를 필터링하여 자신을 보호 할 수 있지만 다른 프로그램과 시스템에는 도움이되지 않습니다.
모두들 말하지만,이 기술은 잘 작동하지만 최고의 깨짐 원인이 무엇인지 확실하지 않습니다.
업데이트 3 : 이 캐릭터가 데이터로 끝나는 것은 더 이상 이론적 인 가능성이 아니며 관찰 된 문제입니다. 사용자가 화면에서 복사 한 데이터를 제출하면 DB에 저장되고 검색이 중단되고 이상한 일이 발생합니다.
우리는 두 가지 일을했습니다.
- 유틸리티를 작성하여이 앱의 모든 데이터 소스에있는 모든 테이블의 모든 열에서 제거했습니다.
- 표준 문자열 입력 프로세서에서 제거하기 위해 필터링을 추가 했으므로 코드가 인식 할 때마다 사라졌습니다.
이것은 기술 자체와 마찬가지로 잘 작동하지만 경고입니다.
업데이트 4 : 우리는 이것에 공급 된 데이터가 HTML 이스케이프 될 수있는 상황에서 이것을 사용하고 있습니다. 올바른 환경에서 HTML 엔터티 중간에 너비가 0 인 공백을 삽입하여 펑키 한 결과를 얻을 수 있습니다.
다음과 같이 우리가 나누지 않는 문자 목록에 앰퍼샌드를 추가하는 것이 수정되었습니다.
var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');
자동 줄 바꿈이 작동하려면 "테이블 레이아웃 : 고정"을 설정해야합니다.
HYPHENATOR가 정답입니다 (위에 제시됨). 귀하의 질문에 대한 실제 문제는 웹 브라우저가 여전히 (2008 년) 하이픈 기능이 없다는 매우 원시적이라는 것입니다. 우리는 여전히 컴퓨터 사용의 초기 단계에 있습니다. 우리는 인내심을 가져야합니다. 디자이너가 웹 세계를 지배하는 한 실제로 유용한 새로운 기능을 기다리는 데 어려움을 겪을 것입니다.
업데이트 : 2011 년 12 월 현재 FF 및 Safari에서 이러한 태그를 지원하는 또 다른 옵션이 있습니다.
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
몇 가지 기본 테스트를 수행했으며 최신 버전의 Mobile Safari 및 Safari 5.1.1에서 작동하는 것 같습니다.
호환성 테이블 : https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable
IE 8 이상과의 호환성을 위해 :
-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;
여기를 참조하십시오 http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
내가해야 할 일은 너비를 설정 한 div 컨테이너의 스타일에 적용하는 것입니다.
이것을 사용하십시오
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
이걸 가지고 있다면-
<style type="text/css">
.cell {
float: left;
width: 100px;
border: 1px solid;
line-height: 1em;
}
</style>
<div class="cell">TopLeft</div>
<div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
<div class="cell">TopRight</div>
<br/>
<div class="cell">BottomLeft</div>
<div class="cell">BottomMiddle</div>
<div class="cell">bottomRight</div>
div가 포함 된 세로 형식으로 전환하고 CSS에서 너비 대신 최소 너비를 사용하십시오.
<style type="text/css">
.column {
float: left;
min-width: 100px;
}
.cell2 {
border: 1px solid;
line-height: 1em;
}
</style>
<div class="column">
<div class="cell2">TopLeft</div>
<div class="cell2">BottomLeft</div>
</div>
<div class="column">
<div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
<div class="cell2">BottomMiddle</div>
</div>
<div class="column">
<div class="cell2">TopRight</div>
<div class="cell2">bottomRight</div>
</div>
<br/>
Of course, if you are displaying genuine tabular data it is ok to use a real table as it is semantically correct and will inform people using screen readers that is supposed to be in a table. It is using them for general layout or image-slicing that people will lynch you for.
I had to do the following because, if the properties were not declared in the correct order, it would randomly break words at the wrong place and without adding a hyphen.
-moz-white-space: pre-wrap;
white-space: pre-wrap;
hyphens: auto;
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
Originally posted by Enigmo: https://stackoverflow.com/a/14191114
Yeah, if it is possible, setting an absolute width and setting overflow : auto works well.
p {
overflow-wrap: break-word;
}
@-moz-document url-prefix() {
p {
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
}
"word-wrap: break-word" works in Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/
Add this to css of your div: word-wrap: break-word;
모든 단어가 줄 바꿈 된 후 오버플로를 유지하고 이것이 문제를 해결하는지 확인하십시오. div의 디스플레이를 다음과 같이 변경하십시오.display: inline;
간단한 함수 (underscore.js 필요)-@porneL 답변을 기반으로
String.prototype.shyBreakString = function(maxLength) {
var shystring = [];
_.each(this.split(' '), function(word){
shystring.push(_.chop(word, maxLength).join('­'));
});
return shystring.join(' ');
};
나는 ­줄 바꿈을 잘하기 위해 단어에 x 문자를 삽입 할 때 잘 작동하는 함수를 작성했습니다 . 여기에있는 모든 답변은 모든 브라우저와 장치를 지원하지는 않지만 PHP를 사용하면 잘 작동합니다.
/**
* Add line-break to text x characters in
* @param string $text
* @param integer $characters_in
* @return string
*/
function line_break_text($text, $characters_in = 10) {
$split = explode(' ', $text);
if ( ! empty($split)) {
foreach ($split as $key => $var) {
if ( strlen($var) > $characters_in ) {
$split[$key] = substr_replace($var, '­', $characters_in, 0);
}
}
}
return implode(' ', $split);
}
참고 URL : https://stackoverflow.com/questions/320184/how-to-prevent-long-words-from-breaking-my-div
'Programming' 카테고리의 다른 글
| 리스트 / 튜플 쌍을 두리스트 / 튜플로 풀기 (0) | 2020.06.13 |
|---|---|
| 쿼리 실행시 Sequelize가 콘솔에 SQL을 출력하지 못하게 하시겠습니까? (0) | 2020.06.13 |
| 왜 2 mod 4 = 2입니까? (0) | 2020.06.13 |
| JSON에서 문자열을 어떻게 이스케이프해야합니까? (0) | 2020.06.13 |
| timedelta를 총 초로 변환 (0) | 2020.06.13 |