Thuộc tính dữ liệu CSS thuộc tính dòng mới & giá trị nội dung phần tử giả

Question

Có thể có một dòng mới trong thuộc tính dữ liệu không?

Tôi cố gắng để làm một cái gì đó như thế này:

CSS:

[data-foo]:after { 
    content: attr(data-foo); 
    background-color: black; 
} 

HTML

<div data-foo="First line \a Second Line">foo</div> 

tôi thấy rằng "\ một" là một dòng mới trong CSS, nhưng vẫn không làm việc cho tôi.

Answer 1

Đây là cách làm việc này. Bạn cần phải sửa đổi thuộc tính dữ liệu của bạn như sau:

<div data-foo='First line &#xa; Second Line'>foo</div> 

và CSS (bằng chứng của khái niệm):

[data-foo]:after { 
    content: attr(data-foo); 
    background-color: black; 
    color: white; 
    white-space: pre; 
    display: inline-block; 
} 

Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/

Chương trình hoạt động

Sử dụng \a không hoạt động, nhưng thực thể HTML tương đương, 
.

Theo thông số CSS2.1, attr(attribute-label) trả về một chuỗi nhưng chuỗi này không được phân tích bởi bộ xử lý CSS (Tôi không chắc chắn điều này có nghĩa là chính xác). Tôi suy đoán rằng \a phải được giải thích bởi bộ xử lý CSS để mã được hiển thị thuộc tính.

Ngược lại, thực thể HTML được trình duyệt trực tiếp hiểu (tôi đoán ...) để nó có vẻ hoạt động.

Tuy nhiên, để nguồn cấp dữ liệu đường hoạt động, bạn cần đặt white-space: pre để giữ khoảng trắng trong phần tử giả. Lưu ý: bạn cũng có thể xem xét cụ thể là pre-wrap hoặc pre-line tùy thuộc vào tính chất nội dung của bạn.

Reference

Về nhận được mã thực thể HTML cho một linefeed:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Về giá trị attr() cho các tài sản content:
http://www.w3.org/TR/CSS2/generate.html#content

Answer 2

Bạn có thể sử dụng một dòng đơn giản phá vỡ bên trong một giá trị thuộc tính:

<div data-foo="First line 
Second Line">foo</div> 

Trình duyệt đã bị lỗi về mặt này và thông số kỹ thuật HTML chưa rõ ràng về điều này; họ thảo luận ý nghĩa của ngắt dòng trong phần tử nội dung (nơi chúng đang lấy tương đương với khoảng trắng), nhưng không nằm trong giá trị thuộc tính. Trong HTML5 CR, các parsing rules for attribute values làm cho nó rõ ràng rằng ngắt dòng chỉ đơn giản là thêm vào giá trị thuộc tính. Các trình duyệt hiện đại thường chơi theo các quy tắc như vậy.

Tuy nhiên, khi bạn sử dụng giá trị trong CSS qua attr(...), ngắt dòng thường được coi là tương đương với khoảng trắng, vì vậy bạn cần đặt white-space trên phần tử giả thành giá trị. pre, pre-wrap hoặc pre-line.

P.S. Trong HTML, ký hiệu \a chỉ là hai ký tự dữ liệu, không có ý nghĩa đặc biệt. Ký hiệu 
 sẽ biểu thị ngắt dòng (cụ thể là LINE FEED), nhưng nó sẽ chỉ tương đương với ngắt dòng thực trong souce.

Answer 3

... và nếu bạn đang cố gắng tìm ra điều này và xảy ra khi sử dụng HAML và AngularJS thì hãy sử dụng \n.

%a.tooltip{:"data-tip" => "Cost Per Unit: {{humanized_cost}} \n(Calculated for applicable Feature Qty.) "} 

kết quả trong:

Cost Per Unit: $10.54 
(Calculated for applicable Feature Qty.) 

Answer 4

Được rồi, đây là một trong những cách dễ dàng để làm điều này. bạn nên viết nó như

data-foo='First line </br> Second Line' 

và thay vì sử dụng .text(), bạn có thể sử dụng .html(). khi bạn sử dụng .html() sau đó nó sẽ mất như ngắt dòng và điều này sẽ giải quyết vấn đề của bạn.