Tôi muốn đảm bảo rằng không bao giờ có ngắt dòng giữa nút radio và bắt đầu nhãn liền kề. Tuy nhiên, tôi muốn văn bản trong phạm vi nhãn được phép quấn. Điều này có thể không? Bạn có thể thấy các lần thử không thành công của tôi bằng cách hiển thị HTML sau đây:Làm cách nào để ngăn chặn ngắt dòng giữa nút radio và nhãn của nó, trong khi vẫn cho phép ngắt dòng trong chính nhãn đó?
<html>
<head>
<style type="text/css">
.box {
border: solid gray 2px;
width: 200px;
margin: 5px;
}
.chopped {
overflow: hidden;
}
</style>
</head>
<body>
Các hộp cần phải có chiều rộng cố định, vì vậy nội dung dài cần được gói, như được thấy trong hộp đầu tiên bên dưới. Và nếu ai đó cố gắng gửi một chuỗi ridiculously dài mà không có bất kỳ dấu cách, chúng ta cần nó để được rút ngắn, chứ không phải là mở rộng ra ngoài rìa của hộp - vấn đề là hiển thị trong hộp thứ hai:
<div class="box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
Vì vậy, tôi thêm "overflow: hidden", và điều này là hơi tốt hơn, nhưng tôi vẫn không thích cách hộp thứ hai có một ngắt dòng giữa nút radio và nhãn của nó:
<div class="chopped box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="chopped box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
Nếu tôi thêm <nobr>, các nút radio nằm bên cạnh các nhãn của chúng và vì vậy chuỗi chưa được định vị giờ đây trông hoàn hảo. Tuy nhiên, điều này vi phạm chuỗi đầu tiên (chuỗi có dấu cách), vì nó không còn kết thúc tốt đẹp:
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</nobr>
</div>
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</nobr>
</div>
</body>
</html>
Điều này cũng có thể được biến đổi bên trong ra ngoài: sử dụng div.radioinput nơi nhãn là, và sử dụng nhãn thay cho span.wrappable. –
Ồ, chắc chắn, và điều đó có thể làm cho ý nghĩa ngữ nghĩa hơn về nhãn là bao bọc xung quanh văn bản, nhưng sau đó bạn mất mát "bấm vào nhãn văn bản để chọn tính năng radiobutton" (bạn có thể lấy lại tính năng đó cho nút radio một id và sử dụng "for" trong nhãn). –
Bạn có thể có tính năng chọn nút radion bằng cách nhấp vào nhãn dễ dàng hơn bằng cách xác định nhãn * cho * id, ví dụ nhãn cho = "ID_of_radio_button" – 0x4a6f4672