Bootstrap popover ẩn ngắt dòng

Question

Tôi đang sử dụng mã html như sau để hiển thị các bootstrap popover

<a data-original-title="" data-content="Hi, 
      Welcome ! 

      Sincerely, 
      programmer 
      " 
    data-placement="bottom"> 
    content 
</a> 

Và tôi khởi tạo các popover như sau

$(this).popover({ 
      html:true 
     }); 

Tất cả hoạt động tốt nhưng vấn đề là nội dung có sẵn trong dữ liệu-nội dung không được hiển thị với các không gian .... Nó loại bỏ tất cả các dòng mới và hiển thị nó trong một dòng .... Làm thế nào tôi có thể khắc phục điều này ....

Answer 1

Bạn cần sử dụng <br /> cho dòng mới bằng html hoặc sử dụng thẻ <pre>

Answer 2

Bạn có thể sử dụng white-space: pre-wrap; để giữ nguyên ngắt dòng trong định dạng. Không cần phải chèn các phần tử html theo cách thủ công.

.popover { 
    white-space: pre-wrap;  
} 

Answer 3

Để thêm vào giải pháp Arun P Johny, nếu bạn thấy rằng <br /> thẻ của bạn trong giá trị data-content được render dưới dạng văn bản đơn giản trong nội dung popover trên trang web, thêm các thuộc tính bổ sung data-html="true", như vậy:

<a data-content="Hi,<br />Welcome !<br /><br />Sincerely,<br />programmer" 
     data-html="true" 
     data-placement="bottom"> 
    content 
</a> 

Hãy lưu ý rằng việc sử dụng data-html="true" sẽ giới thiệu khả năng dễ bị tổn thương đến XSS attacks; không sử dụng nó với đầu vào người dùng không được phép.

Documents: https://getbootstrap.com/docs/3.3/javascript/#popovers-options

Answer 4

tôi quản lý để làm việc này bằng cách thêm \ n để văn bản popover tôi, nơi tôi muốn các dòng để phá vỡ và thêm dòng sau vào stylesheet của tôi:

.popover { 
    white-space: pre-line;  
} 

Cảm ơn giúp mọi người!

Answer 5

Chúng tôi đã quản lý để sử dụng kiểu dáng của không gian trắng: được bọc trước trừ khi chúng tôi nhận thấy rằng thêm khoảng trắng thừa cho toàn bộ cửa sổ bật lên. Thay vào đó, chúng tôi đã thêm kiểu dáng này vào nội dung popover.

.popover-content { 
    white-space: pre-wrap; 
} 

Answer 6

Bạn chỉ cần thêm dữ liệu html = "true" vào thẻ của bạn sau đó tất cả các thẻ html của bạn bên trong giúp làm việc tốt văn bản,