Hướng dẫn how do you force text to the next line in css? - làm thế nào để bạn buộc văn bản xuống dòng tiếp theo trong css?

Tôi có div này:

    Thisismytextwontgoinanewparagraph

với CSS này:

.text
{
    background-color:red;
    width:100px;
}

Như bạn có thể thấy trong jsfiddle này, văn bản đi bên ngoài div.

Có cách nào trong CSS để buộc gói cho một văn bản không có khoảng trắng (chẳng hạn như siêu liên kết) không?

Paul D. Waite

94,9K54 Huy hiệu vàng196 Huy hiệu bạc266 Huy hiệu Đồng54 gold badges196 silver badges266 bronze badges

Đã hỏi ngày 7 tháng 10 năm 2013 lúc 14:01Oct 7, 2013 at 14:01

6

Bạn có thể thử điều này, nhưng nó không đẹp lắm:

.text
{
    background-color:red;
    width:100px;
    word-wrap: break-word;
}

http://jsfiddle.net/esGEn/1/

Đã trả lời ngày 7 tháng 10 năm 2013 lúc 14:04Oct 7, 2013 at 14:04

DaxDaxdax

10,6K7 Huy hiệu vàng51 Huy hiệu bạc86 Huy hiệu đồng7 gold badges51 silver badges86 bronze badges

3

Tại sao không chỉ sử dụng dấu chấm lửng với Overflow Hidden? Điều đó cũng sẽ trông đẹp.

.text {
  background-color: red;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

Đã trả lời ngày 29 tháng 8 lúc 9:35Aug 29 at 9:35

Đây là cách tôi đã làm điều đó. Tôi đã thêm thẻ
vào văn bản tôi muốn đẩy vào dòng tiếp theo.

Sleek custom designs and durable functionality.
Let your headwear work for you.

Viết nhiều dòng ví dụ

Đã trả lời ngày 24 tháng 8 lúc 16:01Aug 24 at 16:01

1

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Thuộc tính overflow-wrap trong CSS cho phép bạn chỉ định rằng trình duyệt có thể phá vỡ một dòng văn bản bên trong phần tử được nhắm mục tiêu trên nhiều dòng ở một vị trí không thể phá vỡ khác. Điều này giúp tránh một chuỗi văn bản dài bất thường gây ra các vấn đề về bố cục do tràn.

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

Cú pháp

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

• Giá trị ban đầu: normal normal
• Áp dụng cho: các yếu tố nội tuyến không được sao chép non-replaced inline elements
• Kế thừa: Có yes
• Giá trị tính toán: Theo chỉ định as specified
• Loại hoạt hình: rời rạc discrete

Giá trị

• normal: Mặc định. Trình duyệt sẽ phá vỡ các dòng theo các quy tắc phá vỡ dòng thông thường. Từ hoặc chuỗi không bị phá vỡ sẽ không bị vỡ, ngay cả khi chúng tràn vào container. the default. The browser will break lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container.

• .text
  {
      background-color:red;
      width:100px;
  }
  

  1: Các từ hoặc chuỗi các ký tự quá lớn để phù hợp với bên trong container của chúng sẽ bị vỡ ở một nơi tùy ý để buộc phá vỡ dòng. Một ký tự dấu gạch nối sẽ không được chèn vào, ngay cả khi thuộc tính

  .text
  {
      background-color:red;
      width:100px;
  }
  

  2 được sử dụng. words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the

  .text
  {
      background-color:red;
      width:100px;
  }
  

  2 property is used.

• .text
  {
      background-color:red;
      width:100px;
  }
  

  3: Phần tử được nhắm mục tiêu phải kế thừa giá trị của thuộc tính overflow-wrap được xác định trên cha mẹ ngay lập tức. the targeted element must inherit the value of the overflow-wrap property defined on its immediate parent.

Bản demo bên dưới có nút chuyển đổi cho phép bạn chuyển đổi giữa normal và

.text
{
    background-color:red;
    width:100px;
}

1.

Để chứng minh vấn đề mà overflow-wrap cố gắng giải quyết, bản demo sử dụng một từ dài bất thường bên trong một thùng chứa tương đối nhỏ. Khi bạn bật

.text
{
    background-color:red;
    width:100px;
}

1, từ bị hỏng để chứa lượng nhỏ không gian có sẵn, như thể từ này là nhiều từ.

Một chuỗi các ký tự không gian không phá vỡ (

.text
{
    background-color:red;
    width:100px;
}

9) sẽ được đối xử theo cùng một cách và cũng sẽ bị phá vỡ tại một điểm thích hợp.

overflow-wrap rất hữu ích khi được áp dụng cho các yếu tố chứa nội dung do người dùng tạo ra (như phần bình luận). Điều này có thể ngăn các URL dài và các chuỗi văn bản không bị gián đoạn khác (ví dụ: phá hoại) phá vỡ bố cục trang web.

Sự tương đồng với thuộc tính .text { background-color:red; width:100px; word-wrap: break-word; } 1

overflow-wrap và

.text
{
    background-color:red;
    width:100px;
    word-wrap: break-word;
}

1 hoạt động rất giống nhau và có thể được sử dụng để giải quyết các vấn đề tương tự. Một bản tóm tắt cơ bản về sự khác biệt, như được giải thích trong đặc tả CSS là:

• overflow-wrap thường được sử dụng để tránh các vấn đề với các chuỗi dài gây ra bố cục bị hỏng do văn bản chảy bên ngoài một container.

• .text
  {
      background-color:red;
      width:100px;
      word-wrap: break-word;
  }
  

  1 Chỉ định các cơ hội bọc mềm giữa các chữ cái thường được liên kết với các ngôn ngữ như tiếng Trung, tiếng Nhật và tiếng Hàn (CJK).

Sau khi mô tả các ví dụ về cách

.text
{
    background-color:red;
    width:100px;
    word-wrap: break-word;
}

1 có thể được sử dụng trong nội dung CJK, thông số kỹ thuật nói: Để chỉ cho phép các cơ hội phá vỡ bổ sung trong trường hợp tràn, xem overflow-wrap.

Từ đó, chúng ta có thể phỏng đoán rằng

.text
{
    background-color:red;
    width:100px;
    word-wrap: break-word;
}

1 được sử dụng tốt nhất với nội dung không phải tiếng Anh đòi hỏi ngôn ngữ được sử dụng.

Tài sản .text { background-color: red; width: 100px; overflow: hidden; text-overflow: ellipsis; } 0 lịch sử

overflow-wrap là tên tiêu chuẩn cho người tiền nhiệm của nó, thuộc tính

.text {
  background-color: red;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

0.

.text {
  background-color: red;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

0 ban đầu là một tính năng chỉ dành cho Internet Explorer độc quyền mà cuối cùng được hỗ trợ trong tất cả các trình duyệt mặc dù không phải là một tiêu chuẩn.

.text {
  background-color: red;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

0 chấp nhận các giá trị giống như overflow-wrap và hành xử theo cùng một cách. Theo thông số kỹ thuật, các trình duyệt, phải coi

.text {
  background-color: red;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

0 như một tên thay thế cho thuộc tính overflow-wrap, như thể đó là một tốc ký của overflow-wrap. Ngoài ra, tất cả các đại lý người dùng được yêu cầu hỗ trợ

.text {
  background-color: red;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

0Indefiness, vì lý do di sản.

Cả overflow-wrap và

.text {
  background-color: red;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

0 sẽ vượt qua xác thực CSS miễn là trình xác nhận được đặt để kiểm tra chống lại CSS3 trở lên (hiện là mặc định).

Hỗ trợ trình duyệt

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Bờ rìa	Cuộc đi săn
23	49	11	18	6.1

Di động / máy tính bảng

Android chrome	Android Firefox	Android	iOS safari
107	106	4.4	7.0-7.1

Thêm thông tin

• Đặc điểm kỹ thuật mô -đun văn bản CSS Cấp 3 (W3C)
• Xử lý các từ và URL dài (CSS-Tricks)
• Viết từ: Một thuộc tính CSS3 hoạt động trong mọi trình duyệt (Louis Lazaris)

• .text
  {
      background-color:red;
      width:100px;
      word-wrap: break-word;
  }
  

  1 so với overflow-wrap (Overflow Stack)
• Cách ngăn chặn việc phá vỡ dòng bằng CSS (DigitalOcean)