Làm thế nào tôi có thể buộc một chuỗi dài mà không có bất kỳ khoảng trống nào được bọc?

Tôi có một chuỗi dài (một chuỗi DNA). Nó không chứa bất kỳ ký tự khoảng trắng.

Ví dụ:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Điều gì sẽ là bộ chọn CSS để buộc văn bản này được bọc trong một html:textareahoặc trong một xul:textbox?

cho các phần tử khối:

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

cho các yếu tố nội tuyến:

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

Đặt không gian có chiều rộng bằng không tại các điểm mà bạn muốn cho phép nghỉ. Không gian có độ rộng bằng không có ​trong HTML. Ví dụ:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Dưới đây là một số câu trả lời rất hữu ích:

Làm thế nào để ngăn chặn những từ dài phá vỡ div của tôi?

để tiết kiệm thời gian của bạn, điều này có thể được giải quyết bằng 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;

Đối với tôi công việc này,

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

Bạn cũng có thể sử dụng div bên trong div khác thay vì td . Tôi đã sử dụng overflow:auto, vì nó hiển thị tất cả văn bản trong trình duyệt Opera và IE của tôi.

Tôi không nghĩ bạn có thể làm điều này với CSS. Thay vào đó, ở 'độ dài từ' thông thường dọc theo chuỗi, hãy chèn một dấu gạch nối mềm HTML:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Điều này sẽ hiển thị một dấu gạch nối ở cuối dòng, nơi nó kết thúc, có thể hoặc không thể là những gì bạn muốn.

Lưu ý Safari dường như bao bọc chuỗi dài trong một <textarea>dù sao, không giống như Firefox.

Sử dụng phương pháp CSS để buộc quấn một chuỗi không có khoảng trắng. Ba phương pháp:

1) Sử dụng thuộc tính khoảng trắng CSS. Để bao quát sự không nhất quán của trình duyệt, bạn phải khai báo nó theo nhiều cách. Vì vậy, chỉ cần đặt chuỗi looooong của bạn vào một số phần tử mức khối (ví dụ: div, pre, p) và cung cấp cho phần tử đó css sau:

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) sử dụng mixin quấn lực từ La bàn .

3) Tôi cũng chỉ xem xét điều này và tôi nghĩ cũng có thể hoạt động (nhưng tôi cần kiểm tra hỗ trợ trình duyệt hoàn toàn hơn):

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

Tham khảo: nội dung gói

Cách của tôi để đi (khi không có cách nào phù hợp để chèn ký tự đặc biệt) qua 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;

Như được tìm thấy ở đây: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-USE-css/ với một số nghiên cứu bổ sung được tìm thấy ở đó.

Để word-wrap:break-word;làm việc cho tôi, tôi phải đảm bảo rằng nó displayđược đặt thành blockvà chiều rộng được đặt trên phần tử. Trong Safari, nó phải có một pthẻ và widthphải được đặt vào ex.

Nếu bạn đang sử dụng PHP thì hàm wordwrap hoạt động tốt cho việc này: http://php.net/manual/en/feft.wordwrap.php

Giải pháp CSS word-wrap: break-word; dường như không nhất quán trên tất cả các trình duyệt.

Các ngôn ngữ phía máy chủ khác có chức năng tương tự - hoặc có thể được xây dựng bằng tay.

Đây là cách hàm wordwrap PHP hoạt động:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

Điều này bao bọc chuỗi ở 50 ký tự bằng thẻ <br>. Tham số 'true' buộc chuỗi bị cắt.

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

Sử dụng <wbr>thẻ:

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

Tôi nghĩ rằng điều này tốt hơn so với việc sử dụng không gian ​có độ rộng bằng không có thể gây ra vấn đề khi bạn sao chép văn bản.

Trong trường hợp bảng không có kích thước cố định, dòng dưới đây hoạt động với tôi:

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

chỉ cần thiết lập widthvà thêm floatlàm việc cho tôi :-)

width:100%;
float:left;