Hướng dẫn how do you stop text overflowing in css? - làm thế nào để bạn dừng văn bản tràn trong css?

178

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Làm thế nào tôi có thể ngăn chặn văn bản trong một khối div tràn vào CSS?

div {
  width: 150px;
  /* what to put here? */
}

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

j08691

200K31 Huy hiệu vàng253 Huy hiệu bạc267 Huy hiệu Đồng31 gold badges253 silver badges267 bronze badges

Đã hỏi ngày 22 tháng 7 năm 2009 lúc 14:02Jul 22, 2009 at 14:02

2

Nếu bạn muốn văn bản tràn trong DIV tự động mới thay vì được ẩn hoặc tạo thanh cuộn, hãy sử dụng

    stuff 


#myDiv {
    overflow:hidden;
}

4

property.

Đã trả lời ngày 24 tháng 9 năm 2010 lúc 21:16Sep 24, 2010 at 21:16

AlkanshelalkanshelAlkanshel

4.0931 Huy hiệu vàng33 Huy hiệu bạc 50 Huy hiệu Đồng1 gold badge33 silver badges50 bronze badges

4

Bạn co thể thử:

    stuff 


#myDiv {
    overflow:hidden;
}

Kiểm tra các tài liệu cho thuộc tính tràn để biết thêm thông tin.

Đã trả lời ngày 22 tháng 7 năm 2009 lúc 14:04Jul 22, 2009 at 14:04

Brettkellybrettkellybrettkelly

27.1k8 Huy hiệu vàng53 Huy hiệu bạc70 Huy hiệu đồng8 gold badges53 silver badges70 bronze badges

1

Câu trả lời ngắn

Đơn giản chỉ cần sử dụng:

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

Câu trả lời dài

1.

stuff

#myDiv { overflow:hidden; } 5

Cho phép các từ dài có thể phá vỡ và quấn vào dòng tiếp theo.

Những giá trị khả thi:

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  6: Chỉ phá vỡ các từ tại các điểm nghỉ được phép

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  7: cho phép các từ không thể phá vỡ bị phá vỡ

div {
    width: 150px; 
    border: 2px solid #ff0000;
}

div.normal {
    word-wrap: normal;
}

div.break {
    word-wrap: break-word;
}

word-wrap: normal
 This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

word-wrap: break-word
 This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

2.

stuff

#myDiv { overflow:hidden; } 8

Chỉ định cách xử lý không gian trắng bên trong một phần tử.

Những giá trị khả thi:

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  6: Chỉ phá vỡ các từ tại các điểm nghỉ được phép

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  7: cho phép các từ không thể phá vỡ bị phá vỡ

div {
    width: 150px;
    border: 2px solid #ff0000;
}

div.nowrap {
    white-space: nowrap;
}

div.pre-wrap {
    white-space: pre-wrap;
}

white-space: nowrap
This div contains a very long but normal paragraph with so many words and nothing else.

white-space: pre-wrap
This div contains a very long but normal paragraph with so many words and nothing else.

2.

stuff

#myDiv { overflow:hidden; } 8

Chỉ định cách xử lý không gian trắng bên trong một phần tử.

Những giá trị khả thi:

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  6: Chỉ phá vỡ các từ tại các điểm nghỉ được phép

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  7: cho phép các từ không thể phá vỡ bị phá vỡ

div {
  width: 150px; 
  border: 2px solid #ff0000;
}

div.normal {
  word-break: normal;
}

div.break-word {
  word-break: break-word;
}

word-break: normal (default)
 This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

word-break: break-word
 This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

2.

    stuff 


#myDiv {
    overflow:hidden;
}

8

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

0

Chỉ định cách xử lý không gian trắng bên trong một phần tử.

    stuff 


#myDiv {
    overflow:hidden;
}

9: Văn bản sẽ không bao giờ kết thúc với dòng tiếp theo.4 gold badges27 silver badges37 bronze badges

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

0: Whitespace được bảo quản bởi trình duyệt. Văn bản sẽ kết thúc khi cần thiết, và trên đường chiaMay 24, 2014 at 7:32

2

3.

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

1

• Chỉ định làm thế nào các từ nên bị phá vỡ khi đạt đến cuối dòng.

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  6: Quy tắc ngắt dòng mặc định.

• 
      stuff 
  
  
  #myDiv {
      overflow:hidden;
  }
  

  7: Để ngăn chặn tràn, từ có thể bị phá vỡ tại các điểm tùy ý.

Đối với các phiên bản dành riêng cho trình duyệt của

    stuff 


#myDiv {
    overflow:hidden;
}

8, hãy sử dụng:

EvandrixJul 22, 2009 at 14:08

0

5.9154 Huy hiệu vàng27 Huy hiệu bạc37 Huy hiệu đồng

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

1

Đã trả lời ngày 24 tháng 5 năm 2014 lúc 7:32

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

2

Bạn có thể kiểm soát nó với CSS, có một vài tùy chọn:

ẩn -> Tất cả các văn bản tràn sẽ được ẩn.17 gold badges111 silver badges131 bronze badges

Có thể nhìn thấy -> Hãy để văn bản tràn ra hiển thị.Dec 24, 2012 at 7:26

Cuộn -> đặt thanh cuộn nếu văn bản trànSachin

Hy vọng nó giúp.1 gold badge20 silver badges43 bronze badges

1

Đã trả lời ngày 22 tháng 7 năm 2009 lúc 14:08

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

3

Có một thuộc tính CSS khác:

Thuộc tính không gian trắng kiểm soát cách xử lý văn bản trên phần tử mà nó được áp dụng.Jul 8, 2014 at 4:48

0

Palaѕя

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

5

70K17 Huy hiệu vàng111 Huy hiệu bạc131 Huy hiệu đồngOct 16, 2020 at 11:25

Đã trả lời ngày 24 tháng 12 năm 2012 lúc 7:26Cloud

Sachinsachin4 silver badges10 bronze badges

0

2.1121 Huy hiệu vàng20 Huy hiệu bạc43 Huy hiệu đồng

Đã trả lời ngày 22 tháng 7 năm 2009 lúc 14:04Jul 22, 2009 at 14:04

Brettkellybrettkellybean

27.1k8 Huy hiệu vàng53 Huy hiệu bạc70 Huy hiệu đồng1 gold badge12 silver badges23 bronze badges

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

4

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

5

Câu trả lời ngắn

Đơn giản chỉ cần sử dụng:59 gold badges74 silver badges93 bronze badges

Câu trả lời dàiJul 22, 2009 at 14:05

1.

    stuff 


#myDiv {
    overflow:hidden;
}

5Kirtan

Cho phép các từ dài có thể phá vỡ và quấn vào dòng tiếp theo.6 gold badges45 silver badges61 bronze badges

1

Những giá trị khả thi:

    stuff 


#myDiv {
    overflow:hidden;
}

6: Chỉ phá vỡ các từ tại các điểm nghỉ được phép

    stuff 


#myDiv {
    overflow:hidden;
}

7: cho phép các từ không thể phá vỡ bị phá vỡ

2.

    stuff 


#myDiv {
    overflow:hidden;
}

8Jul 22, 2009 at 15:32

Chỉ định cách xử lý không gian trắng bên trong một phần tử.

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

6

    stuff 


#myDiv {
    overflow:hidden;
}

9: Văn bản sẽ không bao giờ kết thúc với dòng tiếp theo.

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

0: Whitespace được bảo quản bởi trình duyệt. Văn bản sẽ kết thúc khi cần thiết, và trên đường chiaOct 4, 2016 at 15:41

3xCh2_233xCh2_233xCh2_23

3.

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

11 gold badge20 silver badges39 bronze badges

Chỉ định làm thế nào các từ nên bị phá vỡ khi đạt đến cuối dòng.

    stuff 


#myDiv {
    overflow:hidden;
}

6: Quy tắc ngắt dòng mặc định.

    stuff 


#myDiv {
    overflow:hidden;
}

7: Để ngăn chặn tràn, từ có thể bị phá vỡ tại các điểm tùy ý.

Đối với các phiên bản dành riêng cho trình duyệt của

    stuff 


#myDiv {
    overflow:hidden;
}

8, hãy sử dụng:

Evandrix

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

7

5.9154 Huy hiệu vàng27 Huy hiệu bạc37 Huy hiệu đồngDec 1, 2017 at 0:15

Đã trả lời ngày 24 tháng 5 năm 2014 lúc 7:32Gene

Bạn có thể kiểm soát nó với CSS, có một vài tùy chọn:1 gold badge64 silver badges57 bronze badges

ẩn -> Tất cả các văn bản tràn sẽ được ẩn.Hard coded tradoff ahead !! Depending on the surrounding code and the screen resolution this could lead to different / unwanted behaviour

Có thể nhìn thấy -> Hãy để văn bản tràn ra hiển thị.

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

8

Cuộn -> đặt thanh cuộn nếu văn bản tràn

Example:

This div contains a VeryLongWordWhichDoesNotFitToTheBorder.

9

Hy vọng nó giúp.

    stuff 


#myDiv {
    overflow:hidden;
}

0

Đã trả lời ngày 22 tháng 7 năm 2009 lúc 14:08

    stuff 


#myDiv {
    overflow:hidden;
}

1

    stuff 


#myDiv {
    overflow:hidden;
}

2

    stuff 


#myDiv {
    overflow:hidden;
}

3

Có một thuộc tính CSS khác:

Đã trả lời ngày 7 tháng 4 năm 2020 lúc 10:47Apr 7, 2020 at 10:47

JandojandojanDo

133 huy hiệu đồng3 bronze badges

Làm cách nào để ngăn văn bản thay đổi kích thước CSS?