빈 줄없이 긴 줄을 어떻게 감쌀 수 있습니까? 긴 문자열 (DNA 서열)이 있습니다. 공백 문자를

긴 문자열 (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 인 공간은 &#8203;HTML입니다. 예를 들면 다음과 같습니다.

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;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&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;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/
추가 연구가 있습니다.