Làm cách nào để giữ văn bản trong một dòng trong html?

Để tìm kích thước tối thiểu của hộp sẽ chứa nội dung của nó mà không bị tràn, hãy đặt thuộc tính width hoặc inline-size của hộp thành min-content

Do đó, sử dụng min-content là một khả năng cho các hộp tràn. Nếu có thể cho phép hộp phát triển thành kích thước tối thiểu cần thiết cho nội dung, nhưng không lớn hơn, sử dụng từ khóa này sẽ cung cấp cho bạn kích thước đó

Nếu hộp cần có kích thước cố định hoặc bạn muốn đảm bảo rằng các từ dài không thể tràn ra ngoài, thì thuộc tính visible0 có thể trợ giúp. Thuộc tính này sẽ ngắt một từ khi nó quá dài để tự nó nằm trên một dòng

Ghi chú. Tài sản visible0 hoạt động giống như tài sản không chuẩn visible2. Thuộc tính visible2 hiện được các trình duyệt coi là bí danh của thuộc tính tiêu chuẩn

Một tài sản thay thế để thử là visible4. Thuộc tính này sẽ ngắt từ tại điểm nó tràn. Nó sẽ gây ra sự hòa vốn nếu việc đặt từ lên một dòng mới sẽ cho phép nó hiển thị mà không bị vỡ

Trong ví dụ tiếp theo này, bạn có thể so sánh sự khác biệt giữa hai thuộc tính trên cùng một chuỗi văn bản

Điều này có thể hữu ích nếu bạn muốn ngăn khoảng cách lớn xuất hiện nếu chỉ có đủ khoảng trống cho chuỗi. Hoặc, khi có một yếu tố khác mà bạn không muốn sự gián đoạn xảy ra ngay sau đó

Trong ví dụ dưới đây có một hộp kiểm và nhãn. Giả sử, bạn muốn nhãn bị hỏng nếu nó quá dài so với hộp. Tuy nhiên, bạn không muốn nó bị hỏng ngay sau hộp kiểm

Để thêm dấu gạch nối khi các từ bị hỏng, hãy sử dụng thuộc tính CSS visible5. Sử dụng giá trị của visible6, trình duyệt có thể tự động ngắt các từ tại các điểm gạch nối thích hợp, tuân theo bất kỳ quy tắc nào mà trình duyệt chọn. Để kiểm soát quy trình, hãy sử dụng giá trị visible7, sau đó chèn ký tự ngắt cứng hoặc ngắt mềm vào chuỗi. Phá vỡ khó khăn (visible8) sẽ luôn phá vỡ, ngay cả khi không cần thiết phải làm như vậy. Phá vỡ mềm (visible9) chỉ phá vỡ nếu cần phá vỡ

Bạn cũng có thể sử dụng thuộc tính overflow0 để sử dụng chuỗi bạn chọn thay vì ký tự gạch nối ở cuối dòng (trước dấu ngắt dòng gạch nối)

Thuộc tính này cũng nhận giá trị visible6, giá trị này sẽ chọn đúng giá trị để đánh dấu ngắt dòng ở giữa từ theo quy ước đánh máy của ngôn ngữ nội dung hiện tại

Nếu bạn biết nơi bạn muốn ngắt một chuỗi dài, thì bạn cũng có thể chèn phần tử HTML overflow2. Điều này có thể hữu ích trong các trường hợp như hiển thị một URL dài trên một trang. Sau đó, bạn có thể thêm thuộc tính để ngắt chuỗi ở những vị trí hợp lý giúp dễ đọc hơn

Thuộc tính CSS white-space kiểm soát cách xử lý văn bản trên phần tử mà nó được áp dụng cho. Giả sử bạn có HTML chính xác như thế này

  A bunch of words you see.

Bạn đã tạo kiểu cho div để có chiều rộng được đặt là 100px. Với kích thước phông chữ hợp lý, đó là quá nhiều văn bản để phù hợp với 100px. Nếu không làm bất cứ điều gì, giá trị white-space mặc định là normal và văn bản sẽ ngắt dòng. Xem ví dụ bên dưới hoặc làm theo ở nhà với bản demo

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

Nếu bạn muốn ngăn văn bản bị ngắt dòng, bạn có thể áp dụng white-space: nowrap;

Lưu ý trong ví dụ về mã HTML ở đầu bài viết này, thực tế có hai ngắt dòng, một ngắt dòng trước và một ngắt dòng sau, cho phép văn bản nằm trên một dòng riêng (trong mã). Khi văn bản hiển thị trong trình duyệt, các ngắt dòng đó xuất hiện như thể chúng bị loại bỏ. Cũng loại bỏ các khoảng trắng thừa trên dòng trước chữ cái đầu tiên. Nếu chúng tôi muốn buộc trình duyệt hiển thị các ngắt dòng đó và các ký tự khoảng trắng thừa, chúng tôi có thể sử dụng white-space: pre;

Nó được gọi là pre bởi vì hành vi giống như thể bạn đã bọc văn bản trong các thẻ

Có lẽ bạn thích cách pre tôn vinh khoảng trắng và dấu ngắt, nhưng bạn cần văn bản được bao bọc thay vì có khả năng thoát ra khỏi vùng chứa chính của nó. Đó là những gì

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

Cuối cùng,

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

Thật thú vị, ngắt dòng cuối cùng không được tôn trọng. Theo “Các dòng bị ngắt ở các ký tự dòng mới được giữ nguyên và khi cần thiết để điền vào các hộp dòng. ” vì vậy có lẽ điều đó có ý nghĩa

Đây là một bảng để hiểu các hành vi của tất cả các giá trị khác nhau

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

, thuộc tính white-space theo đúng nghĩa đen sẽ đi theo biểu đồ đó và ánh xạ thuộc tính tới

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}