HTML에서 공백 없이 긴 줄을 감싸는 방법은 무엇입니까?
공백이나 공백 없이 긴 줄로 입력하면 현재 요소보다 더 넓게 입력하면 형식이 깨집니다.다음과 같은 것:
하하하하하하하하하...................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
그냥 사용해봤어요.wordwrap()PHP에서, 하지만 그것의 문제는 링크나 다른 유효한 HTML이 있다면, 그것은 깨집니다.
CSS에는 몇 가지 옵션이 있는 것처럼 보이지만, 모든 브라우저에서 작동하는 옵션은 없습니다.IE에서 워드랩을 참조하십시오.
당신은 이 문제를 어떻게 해결합니까?
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>(선택 사항인 줄 바꿈) 태그입니다.이것은 브라우저에서 상당히 잘 지원되며 기본적으로 필요한 경우 줄 바꿈을 삽입할 수 있음을 브라우저에 알려줍니다.관련된 제로 폭 공간 문자도 있습니다.​같은 뜻으로
웹 페이지에 사용자 의견을 표시하는 사용 사례의 경우 주입 공격 등을 방지하기 위한 출력 형식이 이미 존재한다고 가정합니다.그래서 이것들을 추가하는 것은 간단합니다.<wbr> 매 태 간 격N단어가 너무 길거나 링크에 있는 문자입니다.
이 기능은 CSS가 항상 허용하지 않는 출력 형식을 제어해야 할 때 특히 유용합니다.
저는 스크롤(또는 내용에 따라 완전히 숨기기 위해)을 위해 고정 폭 설정 오버플로가 발생하는 디브에 게시물을 넣을 것입니다.
예를 들어:
#post{
width: 500px;
overflow: scroll;
}
하지만 그건 그저 저입니다.
편집: clFLAVA가 지적한 것처럼...사용하는 것이 더 좋습니다.auto그리고나서scroll저도 그의 말에 동의합니다.
완벽한 HTML/CSS 솔루션은 없습니다.
솔루션은 오버플로를 숨기거나(스크롤 또는 숨기기만 함) 적합하도록 확장합니다.마법은 없습니다.
Q: 100cm 너비의 물체를 99cm 너비의 공간에 어떻게 맞출 수 있습니까?
A: 안 돼요.
당신은 브레이크워드를 읽을 수 있습니다.
편집
이 솔루션을 확인하십시오. 줄 바꿈/연속 스타일을 적용하는 방법과 CSS로 코드 형식을 지정합니다.
또는
긴 단어가 내 div를 깨뜨리지 않도록 어떻게 해야 합니까?
나는 오른쪽 사이드바를 그렇게 고치지 않음으로써 문제를 피합니다 :P
제가 ASP에서 하는 일은 이렇습니다.NET:
- 텍스트 필드를 공백으로 분할하여 모든 단어 가져오기
- 일정량보다 긴 단어를 찾아 단어를 반복합니다.
- 매 x자(예: 매 25자)를 삽입합니다.
저는 이것을 하는 다른 CSS 기반의 방법들을 살펴보았지만, 크로스 브라우저로 작동하는 어떤 것도 찾지 못했습니다.
존의 제안에 따라 제가 만든 코드는 다음과 같습니다.
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자씩 깨지고, 그 사이에 ­를 적용하지만 코드에서 쉽게 변경할 수 있습니다.)
//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 너비 공간을 추가합니다(​.를 줄에 붙이면 줄이 감깁니다.
다음은 JavaScript 예제입니다.
let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add ​ between every character to make it wrap
longWordWithOutSpace.split('').join('​');
자바스크립트로 코드를 더 복잡하게 만들고 싶지 않았습니다. 제가 개발한 Env는 Blazor였고 UI는 스마트폰용이었습니다.코드에는 파일 이름의 목록과 공백이나 다른 도움이 되는 Char가 없는 매우 긴 이름의 일부가 있었습니다. 이것은 나에게 효과가 있습니다: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap .
overflow-wrap: anywhere;
overflow-filename: normal; " 줄 바꿈을 위해 문자열에 공백이 필요하므로 작동하지 않습니다."break-message: 브레이크 워드;"는 단어가 아니었거나 다른 것이 아니었기 때문에 저에게 효과가 없었습니다.잘 모르겠어요!
저는 자바스크립트와 간단한 정규 표현을 사용하여 긴 단어를 깨서 당신의 웹사이트 레이아웃을 깨지 않고 포장할 수 있는 솔루션을 게시했습니다.
저는 이것이 정말 오래된 문제라는 것을 알고 있고 저도 같은 문제가 있었기 때문에 쉬운 해결책을 찾았습니다.첫 번째 게시물에서 언급했듯이 저는 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"> </td>
<td width="100"> </td>
</tr>
</table>
</body>
</html>
이게 도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/363425/how-to-wrap-long-lines-without-spaces-in-html
'source' 카테고리의 다른 글
| __setstate_ 및 __getstate_의 간단한 사용 예 (0) | 2023.08.12 |
|---|---|
| jQuery를 사용하여 DIV에서 높이 스타일을 제거하려면 어떻게 해야 합니까? (0) | 2023.08.12 |
| jquery를 사용하여 요소 유형을 변경하는 방법 (0) | 2023.08.12 |
| ng build와 ng serve의 차이점은 무엇입니까? (0) | 2023.08.12 |
| 처음 150개 행을 선택하고 다음 150개 행을 선택합니다. (0) | 2023.08.12 |