HTML에서 공백없이 긴 줄을 감싸는 방법은 무엇입니까?

HTML에서 공백없이 긴 줄을 감싸는 방법은 무엇입니까?

---

사용자가 공백이나 공백없이 긴 줄을 입력하면 현재 요소보다 넓게 이동하여 서식이 깨집니다. 다음과 같은 것 :

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

wordwrap()PHP에서 사용 을 시도 했지만 문제는 링크 나 다른 유효한 HTML이 있으면 중단된다는 것입니다.

CSS에는 몇 가지 옵션이있는 것 같지만 모든 브라우저에서 작동하는 옵션은 없습니다. IE의 줄 바꿈을 참조하십시오.

이 문제를 어떻게 해결합니까?

---

개인적으로 사용하지는 않았지만 Hyphenator 는 유망 해 보입니다.

관련 (중복 가능성이있는) 질문도 참조하십시오.

• css / js의 줄 바꿈
• long-word-breaks-my-div 문제를 누가 해결 했습니까? (힌트 : stackoverflow 아님)

---

CSS3에서 :

word-wrap:break-word

---

나는 같은 문제를 해결하려고 노력했고 여기서 해결책을 찾았습니다.

http://perishablepress.com/press/2010/06/01/wrapping-content/

솔루션 : 컨테이너에 다음 CSS 속성 추가

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

아이디어는 모두 사용하므로 브라우저 간 호환성이 향상됩니다.

도움이 되었기를 바랍니다

---

overflow: autoCSS 속성 / 값 쌍 을 사용하고 싶습니다 . 이렇게하면 부모 개체가 예상대로 표시됩니다. 부모 내의 텍스트가 너무 넓 으면 개체 자체 내에 스크롤 막대가 나타납니다. 이렇게하면 원하는 모양으로 구조가 유지되고 시청자에게 스크롤하여 더 많이 볼 수있는 기능이 제공됩니다.

편집 :에 대한 좋은 점 overflow: auto과 비교가 overflow: scroll와 있다는 것입니다 auto넘쳐 내용이있는 경우, 스크롤에만 나타납니다. 를 사용 scroll하면 스크롤바가 항상 표시됩니다.

---

이 문제에 대해 제가 가장 좋아하는 해결책 중 하나 인 <wbr>(선택적 줄 바꿈) 태그를 언급 한 사람이 아무도 없다는 사실에 놀랐습니다 . 브라우저 에서 상당히 잘 지원되며 필요한 경우 줄 바꿈을 삽입 할 수 있음을 브라우저에 기본적으로 알려줍니다 . ​동일한 의미를 가진 관련된 0 너비 공백 문자도 있습니다.

언급 된 사용 사례의 경우 웹 페이지에 사용자 댓글을 표시하는 경우 삽입 공격 등을 방지하기위한 출력 형식이 이미 있다고 가정합니다. 따라서 너무 긴 단어 나 링크의 <wbr>모든 N문자에 이러한 태그 를 추가하는 것은 간단 합니다. .

이것은 CSS가 항상 허용하지 않는 출력 형식을 제어해야 할 때 특히 유용합니다.

---

스크롤하려면 고정 너비 설정 오버플로가있는 div에 게시물을 넣습니다 (또는 콘텐츠에 따라 완전히 숨길 수 있음).

그처럼:

#post{
    width: 500px;
    overflow: scroll;
}

하지만 그것은 나뿐입니다.

편집 : cLFlaVA가 지적했듯이 ... auto다음 을 사용하는 것이 좋습니다 scroll. 나는 그와 동의합니다.

---

"완벽한"HTML / CSS 솔루션은 없습니다.

솔루션은 오버 플로우를 숨기거나 (예 : 스크롤링 또는 그냥 숨김) 크기에 맞게 확장합니다. 마법은 없습니다.

Q : 100cm 너비의 물체를 99cm 너비의 공간에 어떻게 맞출 수 있습니까?

A : 할 수 없습니다.

브레이크 워드를 읽을 수 있습니다.

편집하다

이 솔루션을 확인하십시오 css를 사용하여 줄 바꿈 / 연속 스타일 및 코드 서식을 적용하는 방법

또는

긴 단어가 내 사업부를 깨는 것을 방지하는 방법은 무엇입니까?

---

나는 오른쪽 사이드 바를 그렇게 고정하지 않음으로써 문제를 피합니다.

---

ASP.NET에서 수행하는 작업은 다음과 같습니다.

1. 텍스트 필드를 공백으로 분할하여 모든 단어를 가져옵니다.
2. 일정량보다 긴 단어를 찾는 단어를 반복합니다.
3. 모든 x 문자를 삽입합니다 (예 : 25 자마다).

이 작업을 수행하는 다른 CSS 기반 방법을 살펴 보았지만 크로스 브라우저에서 작동하는 것을 찾지 못했습니다.

---

Jon의 제안에 따라 내가 만든 코드 :

public static string WrapWords(string text, int maxLength)
    {
        string[] words = text.Split(' ');
        for (int i = 0; i < words.Length; i++)
        {
            if (words[i].Length > maxLength) //long word
            {
                words[i] = words[i].Insert(maxLength, " ");
                //still long ?
                words[i]=WrapWords(words[i], maxLength);
            }
        }
        text = string.Join(" ", words);
        return (text);
    }

---

단어 분리를 위해 내 페이지에 라이브러리를 추가하고 싶지 않았습니다. 그런 다음 아래에 제공하는 간단한 기능을 작성하여 사람들에게 도움이되기를 바랍니다.

(15 자로 나누고 그 사이에 "& shy;"를 적용하지만 코드에서 쉽게 변경할 수 있습니다.)

//the function:
BreakLargeWords = function (str)
{
    BreakLargeWord = function (word)
    {
        var brokenWords = [];
        var wpatt = /\w{15}|\w/igm;
        while (wmatch = wpatt.exec(word))
        {
            var brokenWord = wmatch[0];
            brokenWords.push(brokenWord);
            if (brokenWord.length >= 15) brokenWords.push("­");
        }
        return brokenWords.join("");
    }

    var match;
    var word = "";
    var words = [];
    var patt = /\W/igm;
    var prevPos = 0;
    while (match = patt.exec(str))
    {
        var pos = match.index;
        var len = pos - prevPos;
        word = str.substr(prevPos, len);

        if (word.length > 15) word = BreakLargeWord(word);

        words.push(word);
        words.push(match[0]);
        prevPos = pos + 1;
    }
    word = str.substr(prevPos);
    if (word.length > 15) word = BreakLargeWord(word);
    words.push(word);
    var text = words.join("");
    return text;
}

//how to use
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);

---

0 너비 공백 ( ​)을 문자열에 추가하면 줄 바꿈됩니다.

다음은 Javacript 예입니다.

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add ​ between every character to make it wrap
longWordWithOutSpace.split('').join('​');

---

웹 사이트 레이아웃을 깨지 않고 래핑 할 수 있도록 긴 단어를 분리하기 위해 JavaScript와 간단한 정규식을 사용하는 솔루션을 게시했습니다.

CSS와 자바 스크립트를 사용하여 긴 줄 바꿈

---

나는 이것이 정말 오래된 문제라는 것을 알고 있으며 동일한 문제가 있었기 때문에 쉬운 해결책을 찾았습니다. 첫 번째 게시물에서 언급했듯이 나는 php-function wordwrap을 사용하기로 결정했습니다.

자세한 내용은 다음 코드 예제를 참조하십시오 ;-)

<?php
    $v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink";
    $v2 = wordwrap($v, 12, "<br/>", true);
?>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <table width="300" border="1">
            <tr height="30">
                <td colspan="3" align="center" valign="top">test</td>
            </tr>
            <tr>
                <td width="100"><a href="<?php echo $v; ?>"><?php echo $v2; ?></a></td>
                <td width="100">&nbsp;</td>
                <td width="100">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

도움이 되었기를 바랍니다.

참고URL : https://stackoverflow.com/questions/363425/how-to-wrap-long-lines-without-spaces-in-html