어떻게 하면 빈칸 없이 긴 끈을 강제로 감을 수 있을까요?

어떻게 하면 빈칸 없이 긴 끈을 강제로 감을 수 있을까요?

저는 긴 끈을 가지고 있습니다.공백 문자를 포함하지 않습니다.

예를 들어,

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

이 텍스트를 강제로 a로 래핑하는 CSS 셀렉터는 무엇입니까?html:textarea아니면.xul:textbox?

블록 요소의 경우:

<textarea style="width:100px; word-wrap:break-word;">
  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>

인라인 요소의 경우:

<span style="width:100px; word-wrap:break-word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>

공백을 허용할 지점에 0 너비 공간을 배치합니다.영폭 공간은​예를 들어 HTML로 표시합니다.

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

다음은 매우 유용한 답변입니다.

긴 말이 내 디브를 깨뜨리는 것을 막는 방법은?

시간을 절약하기 위해 CSS로 해결할 수 있습니다.

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 */
word-break: break-all;

저한테는 이 방법이 통합니다.

<td width="170px" style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

대신 다른 디브 안에 디브를 사용할 수도 있습니다.td. 사용했습니다.overflow:auto, 내 오페라 브라우저와 IE 브라우저에 있는 모든 텍스트를 보여주기 때문입니다.

CSS로는 안 될 것 같아요.대신 문자열을 따라 규칙적인 '단어 길이'에 HTML 소프트-하이픈을 삽입합니다.

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

이렇게 하면 줄의 끝에 하이픈이 표시되고, 하이픈이 감기며, 하이픈은 원하는 것일 수도 있고 그렇지 않을 수도 있습니다.

참고 사파리는 긴 끈을 a로 감싼 것 같습니다.<textarea>어쨌든 파이어폭스와는 다르게.

공백이 없는 문자열을 강제 랩핑하려면 CSS 메서드를 사용합니다.세가지 방법:

1) CSS 공백 속성을 사용합니다.브라우저 불일치를 해결하려면 여러 가지 방법으로 선언해야 합니다.따라서 블록 레벨 요소(예: div, pre, p)에 looong 문자열을 넣고 해당 요소에 다음과 같은 css를 부여합니다.

some_block_level_tag {
    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+ */
}

2) 컴퍼스에서 나온 힘줄을 사용합니다.

3) 저도 방금 이것을 조사하고 있었는데, 작동할 수도 있을 것 같습니다. (하지만 브라우저 지원을 좀 더 완벽하게 테스트해야 합니다.

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

참고 : 포장내용

CSS를 통한 내 갈 길(특수 문자를 삽입하는 적절한 방법이 없는 경우):

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

여기에 나와 있는 것처럼: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ 에서 몇 가지 추가적인 조사를 확인할 수 있습니다.

위해서word-wrap:break-word;나를 위해 일하기 위해서, 나는 그들이 어떤 일을 했는지 확인해야만 했습니다.display로 설정되었습니다.block, 폭이 요소 위에 설정되어 있다는 것을 의미합니다.사파리에서, 그것은 그들에게.p술래잡기width설정해야 했습니다.ex.

태그 사용:

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

저는 이것이 0폭 공간을 사용하는 것보다 더 좋다고 생각합니다.​텍스트를 복사할 때 문제가 발생할 수 있습니다.

PHP를 사용하는 경우 wrap 기능이 이에 적합합니다. http://php.net/manual/en/function.wordwrap.php

CSS는word-wrap: break-word;모든 브라우저에서 일관성이 없는 것 같습니다.

다른 서버측 언어들도 비슷한 기능을 가지고 있거나, 직접 만들 수도 있습니다.

PHP 워드랩 기능의 작동 방식은 다음과 같습니다.

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"<br>",true);

문자열은 <br> 태그를 사용하여 50자로 묶습니다.'true' 매개 변수는 문자열을 강제로 잘라냅니다.

<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

테이블이 고정된 크기가 아닌 경우 아래 라인이 저에게 효과가 있었습니다.

style="width:110px; word-break: break-all;"

부트스트랩을 사용하는 경우 이 클래스 "text-break"을 사용하는 것이 더 좋습니다.

예:

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

자세한 정보는 공식 부트스트랩 설명서 페이지에서 확인할 수 있습니다.

간단히:

word-break: break-word;

저스트 세팅width 추가하기float저를 위해 일했습니다 :-)

width:100%;
float:left;

여기 제가 사용하게 된 코드가 있습니다.white-space: pre-wrap;

.code {
    width: 90vw;
    white-space: pre-wrap;
    font-family: inherit;
    word-break: break-word;
    overflow-wrap: break-word;
    line-break: auto;
}

는 .width값이 이상해 보입니다. 필요에 맞는 값으로 변경해야 합니다.

언급URL : https://stackoverflow.com/questions/499137/how-can-i-force-a-long-string-without-any-blank-to-be-wrapped