Tại sao văn bản tiêu đề của tôi bị cắt bớt?

Tôi có một trang được xây dựng với jQuery điện thoại di động với các đánh dấu tiêu đề đó trông như thế này:Tại sao văn bản tiêu đề của tôi bị cắt bớt?

<div data-role="header"> 
    <h1>The Magnet Puzzle</h1> 
</div>

Tôi đã thử nghiệm nó ra trong một Android và điện thoại Windows, và trong cả hai nó truncates ba nhân vật cuối cùng của văn bản tiêu đề , mặc dù tiêu đề là đủ rộng để phù hợp với toàn bộ tiêu đề:

turncated header

tôi muốn nó trông giống như thay vì điều này:

full header text

Tại sao nó bị cắt ngắn và làm thế nào tôi có thể sửa nó để nó hiển thị toàn bộ tiêu đề?

Nguồn

2012-01-03 Peter Olson

Bạn có chắc chắn tiêu đề đủ rộng không. Bạn đã kiểm tra: 'width',' margin' và 'padding' chưa? – PeeHaa

@PeeHaa Nhìn vào dải tiêu đề. Nhìn vào chiều rộng của văn bản. Nó trông rộng hơn so với tiêu đề cho bạn? –

thật khó để xem 'padding' bằng cách xem một số hình ảnh: P – PeeHaa

Tôi nghĩ rằng sự cố thực sự là JqMobile đang đặt lề trái và phải tới 30% chỉ còn lại 40% tổng chiều rộng cho tiêu đề của bạn. Thay đổi điều đó thành 10% và bạn nhận được dấu chấm lửng khi bạn thực sự cần nó.

.ui-header .ui-title { 
    margin-right: 10%; 
    margin-left: 10%; 
}

Nguồn

2012-11-16 17:09:09 bvs

Không hoạt động với tôi – Pitto

Cảm ơn bạn đã bỏ phiếu! – Thomas

Tại sao họ đặt lề mặc định là 30%? – marcovtwout

Nó đang được cắt ngắn vì CSS jQuery Mobile cho .ui-header .ui-title, thiết lập overflow-hidden, các white-space-nowrap và text-overflow-ellipsis.

Tôi không chắc chắn nếu có một cách tốt hơn để làm điều này, nhưng bạn có thể ghi đè lên điện thoại di động CSS jQuery như vậy:

.ui-header .ui-title { 
    overflow: visible !important; 
    white-space: normal !important; 
}

This question has been asked before with the same answer.

Nguồn

2012-01-03 20:56:04 Ivan

Tôi đã hy vọng tôi không phải làm điều gì đó như vậy –

@PeterOlson: Tôi đã cập nhật câu trả lời của mình với một liên kết đến câu hỏi trước liên quan đến tiêu đề jQuery Mobile . – Ivan

này được thực hiện với CSS.

text-overflow: ellipsis;

Xóa mục này khỏi CSS JqMobile hoặc ghi đè lên bằng CSS của riêng bạn.

Nguồn

2012-01-03 20:57:15 sascha

Siêu kết hợp viewport của bạn phải phù hợp với màn hình thiết bị. Thêm vào <head>:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
minimum-scale=1, width=device-width, height=device-height, 
target-densitydpi=device-dpi" />

Tất cả các chi tiết và giải thích ở đây:

Anatomy of a Jquery Mobile Page

Nguồn

2013-01-21 22:36:30 Day

Chỉ cần quấn bạn <h1> trong một <div>:

<div data-role="header"> 
     <div><h1>The Magnet Puzzle</h1></div> 
    </div>

(Sau đó tập trung các h1 với ưa thích của bạn CSSery.)

Nguồn

2013-03-21 23:26:32 Seanonymous

Xin lỗi, nhưng bố cục chuẩn bao gồm gói DIV + H1 và nó cắt ngắn. Đó là ".ui-header .ui-title {margin-right: 10%; lề trái: 10%;}" ghi đè kiểu cho chiến thắng. –

Tôi đã thử tất cả các giải pháp được đề xuất, luôn thất bại.

Tôi có thể giải quyết vấn đề khi chỉnh sửa jquery.mobile-1.3.1.min.css.

Sử dụng soạn thảo văn bản của bạn tìm thấy chức năng để tìm thấy điều này:

margin:.6em 30% .8em;

và nhận xét nó:

/* margin:.6em 30% .8em; */

Làm việc một cách hoàn hảo đối với tôi trên điện thoại di động jquery 1.3.1 (sử dụng tại địa phương, tất nhiên).

Nguồn

2013-07-03 16:32:42 Pitto

thêm trong tập tin của bạn

<style type="text/css"> 
    .ui-header .ui-title {margin: 0 20%} 
</style>

để thay đổi lề mặc định của tiêu đề.

Nguồn

2014-08-14 09:32:52 Pascal

Tôi biết đó là một sợi chết nhưng vẫn ...

Chỉ cần sử dụng <p style="text-align:center"> thay vì <h1> và bạn nên sử dụng tốt (Chỉ dành cho các hộp thoại).

<div data-role="header"> 
    <p style="text-align:center">The Magnet Puzzle</p> 
</div>

Nguồn

2016-05-16 11:04:37 AdharSri

Tại sao văn bản tiêu đề của tôi bị cắt bớt?

Trả lời

Các vấn đề liên quan