Làm thế nào để bọc văn bản của nút HTML với chiều rộng cố định?

Tôi chỉ nhận thấy rằng nếu bạn cho một nút HTML có chiều rộng cố định, văn bản bên trong nút không bao giờ được bọc. Tôi đã thử dùng từ này, nhưng cách cắt của từ mặc dù có chỗ trống để bọc.

Làm cách nào tôi có thể tạo văn bản của nút HTML với độ rộng cố định như bất kỳ tablecell nào?

<td class="category_column">
  <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
  />
</td>

Các lớp CSS không làm gì ngoài việc thêm viền và sửa đổi phần đệm. Nếu tôi thêm word-wrap:break-wordvào nút này, nó sẽ gói nó như thế này:

Roos Sturingen / Sen
sors

Và tôi không muốn nó bị cắt ở giữa một từ nếu có thể cắt nó giữa các từ.

Tôi thấy rằng bạn có thể sử dụng thuộc tính CSS khoảng trắng:

white-space: normal;

Và nó sẽ phá vỡ các từ như văn bản bình thường.

white-space: normal;
word-wrap: break-word;

Của tôi làm việc với cả hai

Bạn có thể buộc nó (cho phép trình duyệt, tôi tưởng tượng) bằng cách chèn ngắt dòng trong nguồn HTML, như thế này:

<INPUT value="Line 1
Line 2">

Tất nhiên, làm việc ở đâu để đặt ngắt dòng không nhất thiết là tầm thường ...

Nếu bạn có thể sử dụng HTML <BUTTON>thay vì HTML <INPUT>, như vậy, nhãn nút là nội dung của phần tử chứ không phải valuethuộc tính của nó , việc đặt nội dung đó bên trong <SPAN>một widththuộc tính hẹp hơn một vài pixel so với nút có vẻ là một thủ thuật (thậm chí trong IE6 :-).

Tôi đã thấy rằng một nút hoạt động, nhưng bạn sẽ muốn thêm style="height: 100%;"vào nút để nó sẽ hiển thị nhiều hơn dòng đầu tiên trên Safari cho iPhone iOS 5.1.1

   white-space: normal;
   word-wrap: break-word;

"Cả hai" làm việc cho tôi.

Các nút nhiều dòng như thế không thực sự tầm thường để thực hiện. Trang này có một cuộc thảo luận thú vị (mặc dù hơi ngày) về chủ đề này. Đặt cược tốt nhất của bạn có lẽ là bỏ yêu cầu nhiều dòng hoặc tạo một nút tùy chỉnh bằng cách sử dụng ví dụ divs và CSS và thêm một số JavaScript để làm cho nó hoạt động như một nút.

Nếu chúng ta có một số phân chia bên trong <button>thẻ như thế này-

<button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

Đôi khi Văn bản của lớp A bị trùng lặp trên dữ liệu của lớp 1 vì cả hai đều nằm trong một thẻ nút. Tôi cố gắng phá vỡ tex bằng cách sử dụng-

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

Nhưng điều này sẽ không hiệu quả sau đó tôi thử điều này-

white-space: normal;

sau khi loại bỏ các thuộc tính css ở trên và hoàn thành nhiệm vụ của tôi.

Hy vọng sẽ làm việc cho tất cả !!!

word-wrap: break-word;

đã làm cho tôi.