Hiển thị một dòng css

Question

OK, tôi nghĩ rằng tôi vừa phát hiện ra rằng tôi đã xem nhầm phần của trang. Bạn đang đề cập đến các phần tử với các lớp

.container {
  display: inline flex;
}

6,

.container {
  display: inline flex;
}

7,

.container {
  display: inline flex;
}

8 và

.container {
  display: inline flex;
}

9, phải không? . Thông tin này không phải lúc nào cũng dịch tốt qua đồ họa, đó là lý do tại sao điều quan trọng là phải giải thích chi tiết vấn đề của bạn và để có thể xem mã của bạn. Bây giờ chúng ta đã làm sáng tỏ tất cả

Nội dung chính Show

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

Tôi không chắc có cách nào "tốt" để làm điều này với HTML hiện tại. Những gì bạn đang tìm kiếm là một số cách để yêu cầu phần tử

.container {
  display: inline flex;
}

4 hoạt động giống như phần tử nội tuyến nhưng cũng thêm một phần tử trả về cứng ở cuối phần tử đó để phần tử sau (trong trường hợp này là

.container {
  display: inline flex;
}

5) được đặt bên dưới nó. Tôi không biết cách nào hay để làm điều đó mà không cần thêm các phần tử bao bọc

Bây giờ, bạn có thể thực hiện một số thủ thuật, chẳng hạn như đặt

.container {
  display: inline flex;
}

70 và

.container {
  display: inline flex;
}

4 thành

.container {
  display: inline flex;
}

72, sau đó sử dụng phần tử chiều rộng để buộc chúng chiếm toàn bộ chiều rộng của trình duyệt. Nhưng điều này tạo ra một cột cho từng cột để bao bọc, vì vậy nếu bạn thu hẹp trình duyệt quá nhiều thì nó có thể trông không đẹp lắm. Nhưng nếu các cột đều ổn thì bạn đã hoàn thành

Có thể cắt bớt 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

.container {
  display: inline flex;
}

9. 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

.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; */
}

00, 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

#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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à thuộc tính CSS độc quyền sẽ giới hạn văn bản của bộ chứa khối ở một số dòng nhất định khi được sử dụng kết hợp với

.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; */
}

01 và

.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; */
}

02

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

Thuộc tính CSS

.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; */
}

03 đặt xem một phần tử được coi là một phần tử khối hay nội tuyến và bố cục được sử dụng cho phần tử con của nó, chẳng hạn như bố cục luồng, lưới hoặc flex

Chính thức, thuộc tính

.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; */
}

03 đặt kiểu hiển thị bên trong và bên ngoài của phần tử. Loại bên ngoài đặt sự tham gia của một phần tử trong bố cục luồng; . Một số giá trị của

.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; */
}

03 được xác định đầy đủ trong thông số kỹ thuật riêng của chúng;

Thuộc tính CSS

.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; */
}

03 được chỉ định bằng các giá trị từ khóa

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Các giá trị từ khóa có thể được nhóm thành sáu loại giá trị

.container {
  display: inline flex;
}

3

Các từ khóa này chỉ định loại hiển thị bên ngoài của phần tử, về cơ bản là vai trò của nó trong bố cục luồng

.container {
  display: inline flex;
}

4

Phần tử tạo hộp phần tử khối, tạo ngắt dòng cả trước và sau phần tử khi ở luồng bình thường

.container {
  display: inline flex;
}

5

Phần tử tạo một hoặc nhiều hộp phần tử nội tuyến không tạo ngắt dòng trước hoặc sau chính chúng. Trong luồng bình thường, phần tử tiếp theo sẽ nằm trên cùng một dòng nếu có khoảng trống

Ghi chú. Các trình duyệt hỗ trợ cú pháp hai giá trị, khi chỉ tìm giá trị bên ngoài, chẳng hạn như khi chỉ định

.container {
  display: inline flex;
}

6 hoặc

.container {
  display: inline flex;
}

7, sẽ đặt giá trị bên trong thành

.container {
  display: inline flex;
}

8. Điều này sẽ dẫn đến hành vi dự kiến;

.container {
  display: inline flex;
}

9

Các từ khóa này chỉ định loại hiển thị bên trong của phần tử, xác định loại bối cảnh định dạng mà nội dung của nó được trình bày (giả sử đó là phần tử không được thay thế)

.container {
  display: inline flex;
}

8 Thử nghiệm

Phần tử trình bày nội dung của nó bằng cách sử dụng bố cục luồng (bố cục khối và nội tuyến)

Nếu loại hiển thị bên ngoài của nó là

.container {
  display: inline flex;
}

5 hoặc

.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; */
}

32 và nó đang tham gia vào ngữ cảnh định dạng khối hoặc nội tuyến, thì nó sẽ tạo một hộp nội tuyến. Nếu không, nó tạo ra một hộp chứa khối

Tùy thuộc vào giá trị của các thuộc tính khác (chẳng hạn như

.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; */
}

33,

.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; */
}

34 hoặc

.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; */
}

35) và liệu bản thân nó có tham gia vào ngữ cảnh định dạng khối hoặc nội tuyến hay không, nó sẽ thiết lập ngữ cảnh định dạng khối mới (BFC) cho nội dung của nó hoặc tích hợp nội dung của nó vào

.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; */
}

36

Phần tử tạo ra một hộp phần tử khối thiết lập ngữ cảnh định dạng khối mới, xác định vị trí của gốc định dạ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; */
}

37

Các phần tử này hoạt động giống như các phần tử HTML

.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; */
}

38. Nó định nghĩa một hộp cấp độ khối

.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; */
}

39

Phần tử hoạt động giống như một phần tử khối và trình bày nội dung của nó theo mô hình flexbox

.container {
  display: inline flex;
}

10

Phần tử hoạt động giống như một phần tử khối và trình bày nội dung của nó theo mô hình lưới

.container {
  display: inline flex;
}

11 Thử nghiệm

Phần tử này hoạt động giống như một phần tử nội tuyến và trình bày nội dung của nó theo mô hình định dạng ruby. Nó hoạt động giống như các phần tử HTML

.container {
  display: inline flex;
}

12 tương ứng

Ghi chú. Các trình duyệt hỗ trợ cú pháp hai giá trị, khi chỉ tìm giá trị bên trong, chẳng hạn như khi chỉ định

.container {
  display: inline flex;
}

1 hoặc

.container {
  display: inline flex;
}

14, sẽ đặt giá trị bên ngoài của chúng thành

.container {
  display: inline flex;
}

4. Điều này sẽ dẫn đến hành vi dự kiến;

.container {
  display: inline flex;
}

17

Phần tử tạo một hộp khối cho nội dung và một hộp nội tuyến mục danh sách riêng biệt

Một giá trị duy nhất của

.container {
  display: inline flex;
}

18 sẽ khiến phần tử hoạt động giống như một mục danh sách. Điều này có thể được sử dụng cùng với

.container {
  display: inline flex;
}

19 và

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

10

.container {
  display: inline flex;
}

18 cũng có thể được kết hợp với bất kỳ từ khóa

.container {
  display: inline flex;
}

3 nào và từ khóa

.container {
  display: inline flex;
}

8 hoặc

.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; */
}

36

.container {
  display: inline flex;
}

9

Ghi chú. Trong các trình duyệt hỗ trợ cú pháp hai giá trị, nếu không có giá trị bên trong nào được chỉ định, nó sẽ mặc định là

.container {
  display: inline flex;
}

8. Nếu không có giá trị bên ngoài nào được chỉ định, hộp chính sẽ có loại hiển thị bên ngoài là

.container {
  display: inline flex;
}

4

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

18

Một số mô hình bố cục như

.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; */
}

37 và

.container {
  display: inline flex;
}

11 có cấu trúc bên trong phức tạp, với một số vai trò khác nhau mà con cái và con cháu của chúng có thể đảm nhận. Phần này xác định các giá trị hiển thị "nội bộ" chỉ có ý nghĩa trong chế độ bố cục cụ thể đó

.container {
  display: inline flex;
}

21

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

22

.container {
  display: inline flex;
}

23

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

24

.container {
  display: inline flex;
}

25

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

26

.container {
  display: inline flex;
}

27

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

28

.container {
  display: inline flex;
}

29

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

10

.container {
  display: inline flex;
}

11

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

12

.container {
  display: inline flex;
}

13

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

14

.container {
  display: inline flex;
}

15

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

16

.container {
  display: inline flex;
}

17 Thử nghiệm

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

18

.container {
  display: inline flex;
}

19 Thử nghiệm

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

10

.container {
  display: inline flex;
}

11 Thử nghiệm

Các phần tử này được tạo dưới dạng hộp ẩn danh

.container {
  display: inline flex;
}

12 Thử nghiệm

Các phần tử này hoạt động giống như các phần tử HTML của

.container {
  display: inline flex;
}

13

.container {
  display: inline flex;
}

14

Các giá trị này xác định liệu một phần tử có tạo hộp hiển thị hay không

.container {
  display: inline flex;
}

15

Các yếu tố này không tự tạo ra một hộp cụ thể. Chúng được thay thế bằng hộp giả và hộp con của chúng. Xin lưu ý rằng thông số CSS Display Level 3 xác định cách giá trị

.container {
  display: inline flex;
}

15 sẽ ảnh hưởng đến "các phần tử bất thường" — các phần tử không được hiển thị hoàn toàn bởi các khái niệm hộp CSS, chẳng hạn như các phần tử được thay thế. Xem để biết thêm chi tiết

Do một lỗi trong trình duyệt, điều này hiện sẽ xóa phần tử khỏi cây trợ năng — trình đọc màn hình sẽ không nhìn vào nội dung bên trong. Xem phần bên dưới để biết thêm chi tiết

.container {
  display: inline flex;
}

17

Tắt hiển thị một phần tử để nó không ảnh hưởng đến bố cục (tài liệu được hiển thị như thể phần tử đó không tồn tại). Tất cả các phần tử hậu duệ cũng bị tắt hiển thị. Để có một phần tử chiếm dung lượng mà nó thường chiếm, nhưng không thực sự hiển thị bất kỳ thứ gì, hãy sử dụng thuộc tính

.container {
  display: inline flex;
}

18 để thay thế

.container {
  display: inline flex;
}

19

CSS 2 đã sử dụng một từ khóa đơn, cú pháp soạn trước cho thuộc tính

.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; */
}

03, yêu cầu các từ khóa riêng biệt cho các biến thể cấp khối và cấp nội tuyến của cùng một chế độ bố cục

.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; */
}

031

Phần tử tạo ra một hộp phần tử khối sẽ được chuyển với nội dung xung quanh như thể nó là một hộp nội tuyến duy nhất (hoạt động giống như một phần tử được thay thế sẽ)

Nó tương đương với

.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; */
}

032

.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; */
}

033

Giá trị

.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; */
}

033 không có ánh xạ trực tiếp trong HTML. Nó hoạt động giống như một phần tử HTML

.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; */
}

38, nhưng là một hộp nội tuyến, chứ không phải là một hộp cấp độ khối. Bên trong hộp bảng là ngữ cảnh cấp khối

Nó tương đương với

.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; */
}

036

.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; */
}

037

Phần tử hoạt động giống như một phần tử nội tuyến và sắp xếp nội dung của nó theo mô hình flexbox

Nó tương đương với

.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; */
}

038

.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; */
}

039

Phần tử này hoạt động giống như một phần tử nội tuyến và trình bày nội dung của nó theo mô hình lưới

Nó tương đương với

.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; */
}

030

Thông số kỹ thuật Cấp 3 nêu chi tiết hai giá trị cho thuộc tính

.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; */
}

03 — cho phép xác định rõ ràng đặc điểm kỹ thuật của loại hiển thị bên ngoài và bên trong — nhưng điều này chưa được các trình duyệt hỗ trợ tốt

Các phương pháp

.container {
  display: inline flex;
}

19 được soạn sẵn cho phép các kết quả giống nhau với các giá trị từ khóa đơn lẻ và nên được các nhà phát triển ưa chuộng cho đến khi hai giá trị từ khóa được hỗ trợ tốt hơn. Ví dụ: sử dụng hai giá trị, bạn có thể chỉ định một bộ chứa flex nội tuyến như sau

.container {
  display: inline flex;
}

Điều này hiện có thể được chỉ định bằng một giá trị duy nhất

.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; */
}

3

Để biết thêm thông tin về những thay đổi này đối với thông số kỹ thuật, hãy xem bài viết Thích ứng với cú pháp hiển thị hai giá trị mới

.container {
  display: inline flex;
}

1

Các trang riêng lẻ cho các loại giá trị khác nhau mà

.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; */
}

03 có thể đặt trên đó có nhiều ví dụ về các giá trị đó đang hoạt động — xem phần. Ngoài ra, hãy xem tài liệu sau, bao gồm các giá trị khác nhau của màn hình theo chiều sâu

Thích ứng với cú pháp hiển thị hai giá trị mới

Bố cục khối và nội tuyến trong quy trình bình thường
Bố cục luồng và tràn
Bố cục luồng và chế độ viết
Bối cảnh định dạng được giải thích
Trong dòng chảy và ngoài dòng chảy

Khái niệm cơ bản về flexbox
Căn chỉnh các mục trong Flex Container
Kiểm soát tỷ lệ của các mục linh hoạt dọc theo trục chính
Làm chủ gói các mặt hàng linh hoạt
Đặt hàng linh hoạt
Mối quan hệ của flexbox với các phương pháp bố trí khác
Các trường hợp sử dụng điển hình của Flexbox

Các khái niệm cơ bản về bố cục lưới
Mối quan hệ với các phương pháp bố trí khác
Vị trí dựa trên dòng
Khu vực mẫu lưới
Bố cục sử dụng các đường lưới được đặt tên
Tự động đặt trong bố cục lưới
Căn chỉnh hộp trong bố cục lưới
Lưới, giá trị logic và chế độ viết
Bố cục lưới CSS và khả năng truy cập
Bố cục lưới CSS và cải tiến lũy tiến
Nhận ra các bố cục phổ biến bằng cách sử dụng lưới

Sử dụng giá trị

.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; */
}

03 của

.container {
  display: inline flex;
}

17 trên một phần tử sẽ xóa phần tử đó khỏi. Điều này sẽ khiến phần tử và tất cả các phần tử con của nó không còn được công bố bởi công nghệ đọc màn hình

Nếu bạn muốn ẩn phần tử một cách trực quan, một giải pháp thay thế dễ tiếp cận hơn là sử dụng để xóa phần tử đó một cách trực quan khỏi màn hình nhưng giữ cho phần tử đó có thể phân tích cú pháp bằng công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình

Việc triển khai hiện tại trong hầu hết các trình duyệt sẽ xóa khỏi bất kỳ phần tử nào có giá trị

.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; */
}

03 là

.container {
  display: inline flex;
}

15 (nhưng phần tử con sẽ vẫn còn). Điều này sẽ khiến chính phần tử đó không còn được công bố bằng công nghệ đọc màn hình. Đây là hành vi không đúng theo

Đánh dấu dễ tiếp cận hơn với màn hình. nội dung. Hide de Vries
Trưng bày. Nội dung không phải là thiết lập lại CSS. Adrian Roselli

Việc thay đổi giá trị

.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; */
}

03 của phần tử

.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; */
}

38 thành

.container {
  display: inline flex;
}

4,

.container {
  display: inline flex;
}

10 hoặc

.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; */
}

39 sẽ thay đổi biểu diễn của nó trong. Điều này sẽ khiến bảng không còn được công bố chính xác bằng công nghệ đọc màn hình

Ghi chú ngắn về tác dụng của các thuộc tính hiển thị CSS đối với ngữ nghĩa của bảng — The Paciello Group
Nội dung ẩn cho a11y tốt hơn. đi làm mọi thứ
Hiểu Tiêu chí Thành công 1. 3. 1. W3C Hiểu WCAG 2. 0

Giá trị ban đầu

.container {
  display: inline flex;
}

5Áp dụng cho tất cả các phần tửInheritednoComputed valuelà giá trị đã chỉ định, ngoại trừ các phần tử được định vị và thả nổi cũng như phần tử gốc. Trong cả hai trường hợp, giá trị được tính toán có thể là một từ khóa khác với từ khóa đã chỉ định. Loại hoạt hìnhKhông thể hoạt hình

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

1

Trong ví dụ này, chúng ta có hai phần tử vùng chứa cấp khối, mỗi phần tử có ba phần tử con nội tuyến. Bên dưới đó, chúng tôi có một menu chọn cho phép bạn áp dụng các giá trị

.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; */
}

03 khác nhau cho các vùng chứa, cho phép bạn so sánh và đối chiếu cách các giá trị khác nhau ảnh hưởng đến bố cục của phần tử và phần tử con của chúng.

Chúng tôi đã bao gồm

.container {
  display: inline flex;
}

05 và

.container {
  display: inline flex;
}

06 trên các thùng chứa và phần tử con của chúng, để dễ dàng thấy được tác động của các giá trị hiển thị

Ghi chú. Chúng tôi chưa bao gồm bất kỳ cú pháp hai giá trị hiện đại nào vì hỗ trợ cho cú pháp đó vẫn còn khá hạn chế

programming css

Hiển thị một dòng css

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

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội