빈 줄없이 긴 줄을 어떻게 감쌀 수 있습니까?

긴 문자열 (DNA 서열)이 있습니다. 공백 문자를 포함하지 않습니다.

예를 들면 다음과 같습니다.

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

이 텍스트를 a html:textarea또는 로 감싸 야하는 CSS 선택기는 무엇입니까 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

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

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

시간을 절약하기 위해 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>

대신 다른 div 안에 div를 사용할 수도 있습니다 td. 내가 사용하는 overflow:auto내 오페라와 IE 브라우저에서 모두 모든 텍스트와 같이.

CSS 로이 작업을 수행 할 수 있다고 생각하지 않습니다. 대신 문자열을 따라 일정한 '단어 길이'에서 HTML 소프트 하이픈을 삽입하십시오.

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

줄 끝에 하이픈이 표시되어 줄 바꿈이되어 원하는대로 표시 할 수 있습니다.

참고 Safari <textarea>는 Firefox와 달리 어쨌든 긴 문자열을 감싸는 것 같습니다 .

공백이없는 문자열을 강제로 줄이려면 CSS 메서드를 사용하십시오. 세 가지 방법 :

1) CSS 공백 속성을 사용하십시오. 브라우저 불일치를 다루려면 몇 가지 방법으로 선언해야합니다. 따라서 looooong 문자열을 일부 블록 레벨 요소 (예 : div, pre, p)에 넣고 해당 요소에 다음 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) Compass 의 강제 랩 믹스 인을 사용하십시오 .

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하고 너비가 요소에 설정되어 있는지 확인해야했습니다 . Safari에서는 p태그 가 있어야하고에 width설정해야했습니다 ex.

PHP를 사용하는 경우 wordwrap 기능이 다음과 같이 잘 작동합니다. 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>

<wbr>태그 사용 :

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

​텍스트를 복사 할 때 문제를 일으킬 수있는 너비가 0 인 공간 을 사용하는 것보다 이것이 좋습니다 .

테이블이 고정 크기가 아닌 경우 아래 줄이 나를 위해 일했습니다.

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

그냥 설정 width하고 추가하면 float나를 위해 일했습니다 :-)

width:100%;
float:left;