Văn bản một dòng trong HTML

Thuộc tính CSS

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

0 kiểm soát cách văn bản được xử lý 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

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

1. Nếu không làm gì cả, giá trị mặc định của

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

0 là

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

3 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 xuống dòng, bạn có thể áp dụng

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

4

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

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

5

Nó được gọi là

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

6 vì hành vi giống như thể bạn đã bọc văn bản trong các thẻ

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

7 (theo mặc định sẽ xử lý khoảng trắng và ngắt dòng theo cách đó). Khoảng trắng được tôn trọng chính xác như trong HTML và văn bản không ngắt dòng cho đến khi có dấu ngắt dòng trong mã. Điều này đặc biệt hữu ích khi hiển thị mã theo nghĩa đen, mang lại lợi ích về mặt thẩm mỹ từ một số định dạng (và đôi khi là cực kỳ quan trọng, như trong các ngôn ngữ phụ thuộc vào khoảng trắng. )

Có lẽ bạn thích cách

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

6 tôn vinh khoảng trắng và dấu ngắt, nhưng bạn cần văn bản được ngắt dòng 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; 
}

1 dành cho

Cuối cùng,

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

2 sẽ ngắt các dòng mà chúng ngắt mã, nhưng khoảng trắng thừa vẫn bị xóa

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

Dòng mới Khoảng cách và tabGói văn bản

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

3Thu gọnThu gọnGói

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

6Giữ nguyênGiữ lạiKhông bọc

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

5Thu gọnThu gọnKhông bọc

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

6Giữ nguyênGiữ lạiGói

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

7Giữ nguyênThu gọnGói

, thuộc tính

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

0 thực sự sẽ đi theo biểu đồ đó và ánh xạ các 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; 
}

9 và

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

00 tương ứng

Có thể cắt ngắn các dòng văn bản khá dễ dàng trong CSS, bạn có thể đặt rõ ràng chiều rộng và chiều cao của phần tử chứa và đặt

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

3. Như vậy mặc dù điều này không thực sự nói với người dùng nhiều như vậy và không thực sự là một ý tưởng hay. Nếu bạn muốn cho người đọc biết rằng văn bản đã bị cắt bớt một cách có chủ ý, bạn nên thêm một hình elip hoặc 3 dấu chấm như vậy

Vậy điều này được thực hiện như thế nào, làm cách nào bạn có thể tạo Dấu ba chấm tự động? . gain this is fairly easy for single-lines.

Rút ngắn một dòng

Các dòng đơn bạn cần đặt giá trị thuộc tính tràn văn bản thành dấu chấm lửng

Nếu div gói các phần tử của bạn không có chiều cao rõ ràng, bạn cũng cần thêm

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

4, dù sao đi nữa bạn nên sử dụng tốt nhất trong hầu hết các trường hợp sử dụng. khoảng trắng. nowrap đảm bảo rằng nếu chiều rộng của div của bạn quá hẹp so với độ dài của văn bản thì văn bản sẽ không xuống dòng tiếp theo. Đây là đoạn mã cần thiết để tạo H1 ở dạng div hiển thị có dấu chấm lửng trên thiết bị di động. Tôi cũng đã đặt kích thước phông chữ nhỏ hơn để điều này chỉ hiển thị trên rất ít trang nhưng đảm bảo rằng thiết kế không bị hỏng

________số 8

Vâng đó là dễ dàng

Rút ngắn nhiều dòng

Multi-line không khó hơn nhiều, nó là sự kết hợp của 3 tính chất. Giải pháp là một thuộc tính CSS độc quyền sẽ giới hạn văn bản của vùng chứa khối ở một số dòng nhất định khi được sử dụng kết hợp với

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

5 và

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

6

Mặc dù nó là độc quyền nhưng có 96% hỗ trợ trong các trình duyệt theo Tôi có thể sử dụng không

 

.views-field-title a {
    color: #125f04;
    text-decoration: none;
    font-size: 0.85em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* not needed even though some documentation says it is
    text-overflow: ellipsis; */
}

1 cỡ chữ được đặt thành 0. 85em trong ví dụ này vì các liên kết được gói trong h2. Điều này sẽ được làm lại trong những tuần tới vì chủ đề được thiết kế xung quanh nội dung. Vui lòng xem trang chủ của trang web này trên thiết bị di động hoặc độ rộng hẹp

 

Hỗ trợ tốt cho cả hai và theo như tôi thấy hữu ích nếu bạn có nội dung đôi khi có thể dài hơn mức trung bình. Đối với trường hợp của trang web này, sẽ tốt hơn nếu làm cho văn bản nhỏ hơn cho tiêu đề bài viết và đây là điều tôi sẽ làm khi thực hiện một số sửa đổi chủ đề trong những tuần tiếp theo

Ví dụ đầu tiên là tiêu đề trang trong tiêu đề, nó hoạt động tốt và nó chỉ cắt bớt đối với kích thước thiết bị nhỏ theo chiều rộng. Không muốn dải tiêu đề chiếm nhiều màn hình. Tôi nghĩ nó hoạt động tốt vì nó chỉ chiếm một số ít trang

Một suy nghĩ cuối cùng về việc cắt bớt văn bản là bạn chỉ nên làm điều đó cho các trường hợp cạnh vì nếu mọi phần tử cần được cắt bớt thì bạn nên nghĩ đến việc thiết kế lại giao diện người dùng