2013-01-22 32 views
28

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

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

+1

Như Arun đã đề cập, bạn sẽ cần phải sử dụng HTML trong thuộc tính nội dung dữ liệu. Nếu bạn cần sử dụng các thuộc tính bên trong các thuộc tính, chỉ cần sử dụng dấu nháy đơn. – isherwood

Trả lời

45

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

+57

Nó không hoạt động mà không có 'dữ liệu-html =" true "' – daVe

+0

Cảm ơn bạn rất nhiều:) – mohammad

21

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;  
} 
+0

Điều này là rực rỡ và cần nhiều upvotes hơn. Tôi không biết về tùy chọn 'pre-wrap'. – mcNux

+0

Điều này cũng giữ được nhiều không gian liền kề bên trong văn bản. 'white-space: pre-line' chỉ giữ lại các ngắt dòng. – qbert220

24

Để 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

5

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!

1

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; 
} 
+0

Vâng, đó là câu trả lời đúng! Cảm ơn! – EstebanGarciaAlonso

1

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,