Hướng dẫn how do you split text in html? - làm thế nào để bạn tách văn bản trong html?

Tôi có một văn bản rất dài không có không gian. Ví dụ,


WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

Tôi muốn chia văn bản này thành các dòng có chiều rộng tối đa 179px. Bạn có biết làm thế nào để làm điều đó?

gilly3

85.3K25 Huy hiệu vàng142 Huy hiệu bạc173 Huy hiệu đồng25 gold badges142 silver badges173 bronze badges

Đã hỏi ngày 22 tháng 9 năm 2011 lúc 16:36Sep 22, 2011 at 16:36

Sử dụng CSS.

word-wrap: break-word;

Đã trả lời ngày 22 tháng 9 năm 2011 lúc 16:39Sep 22, 2011 at 16:39

Duriduriduri

14.7K3 Huy hiệu vàng42 Huy hiệu bạc49 Huy hiệu đồng3 gold badges42 silver badges49 bronze badges

Điều này sẽ không hoạt động trong tất cả các trình duyệt, nhưng ít nhất nó sẽ hoạt động đối với hầu hết [đây là CSS]:

#your_div {
  white-space: pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

Đã trả lời ngày 22 tháng 9 năm 2011 lúc 16:40Sep 22, 2011 at 16:40

BlenderBlenderBlender

280K52 Huy hiệu vàng427 Huy hiệu bạc487 Huy hiệu đồng52 gold badges427 silver badges487 bronze badges

Tôi nghĩ rằng tài sản CSS3 word-wrap:break-word sẽ sắp xếp điều này cho bạn.

Đã trả lời ngày 22 tháng 9 năm 2011 lúc 16:39Sep 22, 2011 at 16:39

DuriduriJHolyhead

14.7K3 Huy hiệu vàng42 Huy hiệu bạc49 Huy hiệu đồng4 silver badges8 bronze badges

Điều này sẽ không hoạt động trong tất cả các trình duyệt, nhưng ít nhất nó sẽ hoạt động đối với hầu hết [đây là CSS]:

Đã trả lời ngày 22 tháng 9 năm 2011 lúc 16:40Sep 22, 2011 at 16:40

BlenderBlenderChris G.

280K52 Huy hiệu vàng427 Huy hiệu bạc487 Huy hiệu đồng2 gold badges20 silver badges38 bronze badges

Tôi nghĩ rằng tài sản CSS3 word-wrap:break-word sẽ sắp xếp điều này cho bạn.

JholyheadjholyheadSep 22, 2011 at 16:43

9644 Huy hiệu bạc8 Huy hiệu đồngsimoncereska

Thêm phong cách word-wrap: break-word; vào div. Đó là một thuộc tính CSS3 hoạt động trong tất cả các trình duyệt [thậm chí IE5!]17 silver badges24 bronze badges

Chris G.Chris G.Sep 22, 2011 at 17:12

3.9432 Huy hiệu vàng20 Huy hiệu bạc38 Huy hiệu ĐồnganglimasS

Tôi sẽ đề nghị word-wrap: break-word2 gold badges16 silver badges40 bronze badges

Đã trả lời ngày 22 tháng 9 năm 2011 lúc 16:43Sep 22, 2011 at 16:42

gilly3gilly3gilly3

85.3K25 Huy hiệu vàng142 Huy hiệu bạc173 Huy hiệu đồng25 gold badges142 silver badges173 bronze badges

Phương pháp splitText[] của giao diện Text chia nút Text thành hai nút ở phần bù được chỉ định, giữ cả hai nút trong cây làm anh chị em.splitText[] method of the Text interface breaks the Text node into two nodes at the specified offset, keeping both nodes in the tree as siblings.

Sau khi chia, nút hiện tại chứa tất cả nội dung lên đến điểm bù được chỉ định và một nút mới được tạo cùng loại chứa văn bản còn lại. Nút mới được tạo được trả lại cho người gọi. Nếu nút gốc có cha mẹ, nút mới được chèn là anh chị em tiếp theo của nút gốc. Nếu phần bù bằng chiều dài của nút gốc, nút mới được tạo không có dữ liệu.

Các nút văn bản được phân tách có thể được nối bằng phương pháp

word-wrap: break-word;

Cú pháp

newNode = textNode.splitText[offset]

Thông số

word-wrap: break-word;

Chỉ mục ngay trước đó để phá nút văn bản.

Giá trị trả về

Trả về nút Text mới được tạo có chứa văn bản sau điểm bù được chỉ định.

Ngoại lệ

word-wrap: break-word;

word-wrap: break-word;

Ném nếu phần bù được chỉ định là âm hoặc lớn hơn số lượng đơn vị 16 bit trong văn bản của nút.

word-wrap: break-word;

word-wrap: break-word;

Ném nếu nút chỉ đọc.

Thí dụ

Trong ví dụ này, văn bản của

word-wrap: break-word;

8 được chia thành hai nút văn bản và

word-wrap: break-word;

9 được chèn giữa chúng.

const p = document.querySelector['p'];

// Get contents of  as a text node
const foobar = p.firstChild;

// Split 'foobar' into two text nodes, 'foo' and 'bar',
// and save 'bar' as a const
const bar = foobar.splitText[3];

// Create a  element containing ' new content '
const u = document.createElement['u'];
u.appendChild[document.createTextNode[' new content ']];

// Add  before 'bar'
p.insertBefore[u, bar];

// The result is: 
foo new content bar

Thông số kỹ thuật

Sự chỉ rõ

DOM Standard # Ref-For-DOM-Text-Slittext①
# ref-for-dom-text-splittext①

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Giao diện Text thuộc về.

Phương pháp ngược lại:

#your_div {
  white-space: pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

Những gì được chia trong HTML?

Phương thức Split [] chia một chuỗi thành một mảng các chuỗi con.Phương thức chia [] trả về mảng mới.Phương thức chia [] không thay đổi chuỗi gốc.Nếu [""] được sử dụng làm dấu phân cách, chuỗi được phân chia giữa các từ.splits a string into an array of substrings. The split[] method returns the new array. The split[] method does not change the original string. If [" "] is used as separator, the string is split between words.

Làm thế nào để bạn chia theo chiều dọc trong HTML?

Để tạo một đường thẳng đứng, hãy sử dụng thuộc tính Biên giới bên trái hoặc Biên giới.Thuộc tính chiều cao được sử dụng để đặt chiều cao của phần tử biên giới [đường dọc].

Làm cách nào để chia một trang thành hai phần trong HTML?

Example..

Chiều cao: 100%;Chiều rộng: 50%;Vị trí: Đã sửa;Z-Chỉ số: 1;Top: 0;Overflow-x: ẩn;Đệm-đỉnh: 20px ;.

Trái: 0;Màu nền: #111 ;.

Phải: 0;màu nền: màu đỏ ;.

Vị trí: Tuyệt đối;Top: 50%;Trái: 50%;Biến đổi: dịch [-50%, -50%];Văn bản-Align: Trung tâm ;.

Chiều rộng: 150px;Biên giới-Radius: 50%;.