Hướng dẫn css before content wrap - css trước khi gói nội dung

Tôi không có quyền truy cập vào HTML hoặc PHP cho một trang và chỉ có thể chỉnh sửa qua CSS. Tôi đã thực hiện các sửa đổi trên một trang web và thêm văn bản thông qua các yếu tố giả

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Làm cách nào để thêm nhiều dòng trong thuộc tính

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Trong ví dụ, phần tử dòng ngắt HTML chỉ để trực quan hóa những gì tôi muốn đạt được:

#headerAgentInfoDetailsPhone::after {
  content: 'Office: XXXXX 
 Mobile: YYYYY ';
}

Penny Liu

12.9k5 Huy hiệu vàng71 Huy hiệu bạc86 Huy hiệu Đồng5 gold badges71 silver badges86 bronze badges

Đã hỏi ngày 11 tháng 6 năm 2013 lúc 15:15Jun 11, 2013 at 15:15

6

Tài sản

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Các tác giả có thể bao gồm các dòng mới trong nội dung được tạo bằng cách viết chuỗi Escape "\ A" trong một trong các chuỗi sau thuộc tính 'nội dung'. Sự phá vỡ dòng chèn này vẫn phải chịu thuộc tính 'không gian trắng'. Xem "chuỗi" và "ký tự và trường hợp" để biết thêm thông tin về chuỗi thoát "\ A".still subject to the 'white-space' property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.

Vì vậy, bạn có thể sử dụng:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

Tuy nhiên, khi thoát khỏi các chuỗi tùy ý, nên sử dụng

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Đã trả lời ngày 11 tháng 6 năm 2013 lúc 15:21Jun 11, 2013 at 15:21

AdriftadriftAdrift

56.1K12 Huy hiệu vàng89 Huy hiệu bạc88 Huy hiệu đồng12 gold badges89 silver badges88 bronze badges

4

Bài viết hay giải thích những điều cơ bản (tuy nhiên không bao gồm các lần phá vỡ dòng).

Cả một loạt các yếu tố giả bạn có thể làm

Nếu bạn cần có hai phần tử nội tuyến trong đó một phần trong dòng tiếp theo trong một phần tử khác, bạn có thể thực hiện điều này bằng cách thêm một phần tử giả: sau khi có nội dung: '\ a' và không gian trắng: trước

HTML

    This is the main label
    secondary label

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

Brennanyoung

5.9683 Huy hiệu vàng25 Huy hiệu bạc41 Huy hiệu đồng3 gold badges25 silver badges41 bronze badges

Đã trả lời ngày 11 tháng 6 năm 2013 lúc 15:36Jun 11, 2013 at 15:36

Undercoreunderscoreunderscore

6.3896 Huy hiệu vàng37 Huy hiệu bạc78 Huy hiệu đồng6 gold badges37 silver badges78 bronze badges

Tôi đã phải có những dòng mới trong một chú giải công cụ. Tôi đã phải thêm CSS này vào: Sau:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

Các từ có vẻ cần thiết.

Ngoài ra, \ A không hoạt động ở giữa văn bản để hiển thị, để buộc một dòng mới.

đã làm việc. Sau đó tôi đã có thể nhận được một chú giải công cụ như vậy:

Đã trả lời ngày 21 tháng 1 năm 2016 lúc 0:07Jan 21, 2016 at 0:07

Cédric Nicolascédric NicolasCédric NICOLAS

9662 Huy hiệu vàng10 Huy hiệu bạc22 Huy hiệu đồng2 gold badges10 silver badges22 bronze badges

Bạn có thể thử cái này

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

JS fiddle

Đã trả lời ngày 11 tháng 6 năm 2013 lúc 15:20Jun 11, 2013 at 15:20

SachinsachinSachin

39,5K7 Huy hiệu vàng87 Huy hiệu bạc102 Huy hiệu đồng7 gold badges87 silver badges102 bronze badges

0

Đối với những người sẽ tìm kiếm 'Cách thay đổi nội dung động trên phần tử giả thêm dấu hiệu dòng mới "Đây là câu trả lời

HTML chars như

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Thay vào đó, bạn cần tìm biểu diễn unicode của các ký tự này là U+000D và U+000a để chúng ta có thể làm một cái gì đó như

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Hy vọng điều này tiết kiệm thời gian của một số người, chúc may mắn :)

Đã trả lời ngày 3 tháng 7 năm 2018 lúc 9:27Jul 3, 2018 at 9:27

SzymonszymonSzymon

1.2611 Huy hiệu vàng19 Huy hiệu bạc34 Huy hiệu đồng1 gold badge19 silver badges34 bronze badges

Thêm độ ngắt dòng vào

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Đã trả lời ngày 13 tháng 6 năm 2018 lúc 9:52Jun 13, 2018 at 9:52

Ashar Zafarashar ZafarAshar Zafar

3782 Huy hiệu bạc11 Huy hiệu đồng2 silver badges11 bronze badges

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Các lớp .mbr và .dbr có thể mô phỏng hành vi phá vỡ dòng bằng cách sử dụng hiển thị CSS: Bảng. Hữu ích nếu bạn muốn thay thế thật.

Kiểm tra bản demo này Codepen: https://codepen.io/marko36/pen/rbweyy và bài đăng này trên trang web phản hồi sử dụng: Phép phản hồi: Mô phỏng tại các điểm dừng đã cho.
and this post on responsive site use: Responsive line-breaks: simulate
at given breakpoints.

Đã trả lời ngày 10 tháng 7 năm 2018 lúc 19:22Jul 10, 2018 at 19:22

marko-36marko-36marko-36

1.1213 Huy hiệu vàng20 Huy hiệu bạc35 Huy hiệu Đồng3 gold badges20 silver badges35 bronze badges

2

Làm cách nào để làm văn bản không bao bọc trong CSS?

Nếu bạn muốn ngăn văn bản kết thúc, bạn có thể áp dụng không gian trắng: NowRap; Thông báo trong ví dụ mã HTML ở đầu bài viết này, thực tế có hai lần ngắt dòng, một lần trước dòng văn bản và một lần sau, cho phép văn bản nằm trên dòng riêng của nó (trong mã).apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).

Làm thế nào để bạn phá vỡ nội dung trong CSS?

Một sự phá vỡ khó khăn ( -) sẽ luôn bị phá vỡ, ngay cả khi không cần thiết phải làm như vậy. Break Break (& Shy;) Chỉ phá vỡ nếu cần phá vỡ. Bạn cũng có thể sử dụng thuộc tính dấu gạch nối để sử dụng chuỗi bạn chọn thay vì ký tự dấu gạch nối ở cuối dòng (trước khi ngắt dòng gạch nối). A soft break ( ­ ) only breaks if breaking is needed. You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).

Làm cách nào để bọc văn bản trong dòng tiếp theo trong CSS?

FYI: Bạn có thể sử dụng giá trị 'bình thường' hoặc 'từ đột phá' với thuộc tính bao nhiêu từ. Bình thường có nghĩa là văn bản sẽ mở rộng ranh giới của hộp. Tiếng vỡ có nghĩa là văn bản sẽ kết thúc với dòng tiếp theo.use either the 'normal' or 'break-word' value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.

Làm thế nào để bạn đặt BR trong CSS?

Một sự phá vỡ dòng có thể được thêm vào trong HTML, chỉ sử dụng CSS, bằng cách sử dụng pseudo-class :: sau hoặc :: trước. Trong bảng kiểu, chúng tôi sử dụng các lớp giả này, với lớp HTML hoặc ID, trước hoặc sau nơi chúng tôi muốn chèn một dòng phá vỡ. Trong MyClass :: Sau: Đặt thuộc tính Nội dung thành "\ A" (ký tự dòng mới).employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).