JQuery Mobile ListView hiển thị văn bản trên nhiều dòng

Question

tôi đang làm việc trên một cái nhìn danh sách với jQuery Mobile và tôi đang cố gắng để làm một cái gì đó tương tự như mẫu này: http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-formatting.html

Tôi có một tiêu đề và một văn bản mô tả dài . Vấn đề là tôi cần những văn bản để bắt đầu một dòng mới nếu màn hình quá nhỏ (hoặc văn bản để lâu), những gì xảy ra bây giờ là văn bản được cắt và thêm dấu chấm ...

<div data-role="content" data-theme="c"> 
    <ul data-role="listview" data-theme="c">    
    <li> 
    <a href="tl1.html" data-transition="fade"> 
    <img style="margin-left: 8px" width="80" height="80" alt="sample" src="images/sample_event.jpg" align="left"/> 
    My band 
    <br> 
    <font style="font-size: small"> 
    Event description, enter the event description. Please enter the event description, event   description enter. Add a description of the event. 
    </font> 
    </a> 
    </li> 
    </ul> 
</div> 

Cảm ơn ! Marco

Answer 1

Con đường tôi đã làm điều đó là để thêm white-space:normal; với CSS cho phần đó. Hy vọng rằng sẽ giúp.

Answer 2

ruthc68 từ diễn đàn chính thức jQuery Mobile đã trả lời câu hỏi:

<font style="white-space:normal; font-size: small" > 

Hy vọng điều này sẽ tiết kiệm thời gian với một ai đó :)

Answer 3

1. mở (jquery.mobile.structure-1.0.min.css) và
2. thay thế tất cả white-space: nowrap bởi white-space: bình thường

Answer 4

Gulp.

"JQuery Mobile ListView hiển thị văn bản trên nhiều dòng"

tôi stumbled trên câu hỏi StackOverflow này, như tôi cũng đã tự hỏi làm thế nào để làm điều này.

Tuy nhiên, sau khi chơi xung quanh với jqGrid Mobile, câu trả lời hay nhất của tôi cho câu hỏi này là: đừng làm vậy.

Nếu bạn có một bộ hồ sơ, trong đó mỗi bản ghi chứa nhiều dòng, thì đó là trải nghiệm người dùng đẹp hơn nhiều để viết mã của riêng bạn.

Dưới đây là một vài ảnh chụp màn hình của ứng dụng iPhone của tôi, để cho bạn biết ý tôi.

Trên scren đầu tiên, nơi mà người dùng tìm kiếm một tên Công ty, tôi làm sử dụng jqGrid thoại di động, cùng với một hộp nơi người dùng có thể gõ vào một tên công ty và ngay thấy khớp các bản ghi trong jqGrid.

tôi ghi nhận như thế nào bạn có thể thêm chức năng này vào jqGrid đây:

jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

Trên trang web thứ hai, mặc dù tôi cố tình quyết định không sử dụng jqGrid ở tất cả. Tôi thấy nó thân thiện với người dùng hơn để sao chép kiểu dáng css của jqGrid, và tạo hai điều khiển HTML:

• Thanh "tiêu đề", hiển thị ngữ cảnh của những gì bạn thấy (Tên Công ty bạn đã chọn, trong này ví dụ)
• danh sách các vị trí có thể cuộn, lấp đầy phần còn lại của màn hình.

Vâng, tôi biết, điều đó có nghĩa là phải viết thêm mã JavaScript, nhưng nó trông tuyệt vời trên thiết bị và tận dụng tối đa không gian màn hình giới hạn. Chú ý như thế nào, trong màn hình ở trên, tôi đã cuộn xuống danh sách các vị trí của mình và Safari đã tự động ẩn thanh điều hướng của nó (trong đó các nút Back/Next/Send to được hiển thị).

Tất nhiên, nó hoạt động tốt trong ví dụ cụ thể này vì tôi biết sẽ không có nhiều bản ghi trên màn hình này (vị trí cho một công ty cụ thể). Bằng cách vứt bỏ jqGrid trên màn hình này, tôi đã mất khả năng người dùng tìm kiếm, ví dụ: vị trí ở một quốc gia cụ thể,

Nhưng, đối với ứng dụng này, không sử dụng jqGrid trên một trong các màn hình cải thiện khả năng sử dụng .

Tôi đánh giá cao ví dụ này không hiển thị bất kỳ mã JavaScript nào, nhưng tôi hy vọng các ảnh chụp màn hình sẽ truyền cảm hứng cho bạn suy nghĩ bên ngoài hộp jqGrid khi phát triển ứng dụng cho thiết bị.