Làm cách nào để hiển thị dấu ba chấm trên trường nhập chỉ đọc trong trình duyệt chứng khoán Android?

Question

Làm cách nào để bạn đặt trường nhập để hiển thị dấu ba chấm nếu văn bản quá dài? Trường nhập chỉ đọc và độ rộng của nó được đặt thành 100%.

Điều này có khả thi không? Nếu không, làm thế nào để bạn làm điều đó trong JavaScript?

Lưu ý: Mặc dù điều này dường như hoạt động trên Chrome, nhưng nó không hoạt động trên trình duyệt chứng khoán Android.

css hiện tại của tôi đối với lĩnh vực đầu vào:

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 

Cảm ơn!

Answer 1

Tôi nghĩ answer này sẽ giúp bạn

Bạn có thể tạo một lớp và áp dụng nó vào HTML textbox
bạn

<input type="text" readonly value="Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit " class="ellipsis"> 

CSS

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
} 

Để Khắc phục sự cố CSS Android text-overflow theo Ben

*{ 
    text-rendering: optimizeLegibility; 
} 

Kiểm tra nó sống ở đây http://jsfiddle.net/b4YjX/

Answer 2

Tùy thuộc vào yêu cầu của bạn, bạn có thể sử dụng CSS của text-overflow để đạt được điều này:

HTML:

<input disabled="disabled" value="really really long text that will be trunked" /> 

CSS

input{ 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    width: 100px; 
} 

demo: http://jsfiddle.net/yrPc8/

Answer 3

Các mã sau đây đã được thử nghiệm và nó hoạt động, tôi hy vọng rằng sẽ giúp!

.input{ 
overflow:hidden; 
text-overflow:ellipsis; 
width:100%; 
} 

Answer 4

này dường như là một giới hạn/lỗi trong trình duyệt Android: nó có vẻ thất bại trong việc thực hiện text-overflow: ellipsis trên bất kỳ yếu tố input.

Ví dụ, thay vì <input name=foo value="some long string here" width=100%>, bạn có thể sử dụng

<style> 
.hidden { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
} 
</style> 
<div class=hidden>some long string here</div> 
<input type=hidden name=foo value="some long string here"> 

Đối với một lĩnh vực readonly, có một cách giải quyết đơn giản: lặp lại trong các dữ liệu, đầu tiên trong (nói) div yếu tố, mà bạn thiết lập text-overflow: ellipsis, và sau đó trong một lĩnh vực ẩn. Bạn có thể muốn tạo kiểu cho phần tử đầu tiên trông giống như một trường chỉ đọc, nhưng giữ nó như văn bản bình thường sẽ làm cho nó rõ ràng hơn với người dùng rằng dữ liệu này không thể được chỉnh sửa bằng các phương tiện bình thường.

Như thường lệ với các thiết bị nhỏ, bạn thường cần một cái gì đó như <meta name="viewport" content="width=device-width,initial-scale=1"> để tạo 100% tương ứng với chiều rộng thiết bị thực tế.