Biết mức độ rộng của dòng văn bản trong HTML cho các từ bọc và các ứng dụng khác

Bạn có biết cách nào để biết mức độ rộng sẽ là dòng văn bản để bạn có thể phá vỡ nó chính xác không?Biết mức độ rộng của dòng văn bản trong HTML cho các từ bọc và các ứng dụng khác

Giả sử bạn muốn ngắt văn bản dài như vậy nó không tràn vào một thùng chứa có chiều rộng cố định, nhưng bạn muốn dòng để phá vỡ gần nhất có thể, vì vậy hãy đoán nơi để chèn s không phải là sạch dung dịch.

Tôi muốn điều tra, tôi tưởng tượng điều này có thể được thực hiện có một div vô hình sau đó in dòng bên trong nó và kiểm tra chiều rộng của div, hoặc một cái gì đó như thế, với Javascript.

Có ai đã làm điều gì đó như thế này không?

* (trọng tâm là không ngắt dòng, đó mới chỉ là ứng dụng mà nói đến cái tâm của tôi bây giờ, nhưng biết chiều rộng của một văn bản là những gì tôi muốn)

Nguồn

2009-08-01 Petruza

Hãy xem http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

@Josef: Câu trả lời trong câu hỏi đó có thể tác động đến giao diện trực quan của trang. Cụ thể trong IE nó có thể gây ra một thanh cuộn ngang xuất hiện không có lý do rõ ràng cho người dùng. – AnthonyWJones

@AnthonyWJones: Tôi hiểu, bạn có thể muốn cân nhắc thêm câu trả lời của mình ở đó? –

Đây là một hoàn thành "Heath Robinson" (làm tài liệu tham khảo mà cách tiếp cận tốt?)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <script type="text/javascript"> 
     function txtContent_onchange() 
     { 
      var span = document.getElementById("spanMeasure") 
      span.innerHTML = ""; 
      span.appendChild(document.createTextNode(this.value)); 
      document.getElementById("txtWidth").value = span.scrollWidth; 

     } 
    </script> 
    <style type="text/css"> 
     #spanMeasure 
     { 
      position:absolute; 
      top:0px; 
      left:0px; 
      visibility:hidden; 
      width:10px; 
      white-space:nowrap; 
      overflow:hidden 
     } 
    </style> 
</head> 
<body> 

    <input id="txtContent" onchange="txtContent_onchange.call(this)" /><br /> 
    <input id="txtWidth" /> 
    <span id="spanMeasure"><span> 

</body> 
</html>

Điều quan trọng ở đây là cấu hình của phần tử span. Phần tử này sẽ không ảnh hưởng đến giao diện trực quan của trang. Thuộc tính scrollWidth của nó sẽ trả về độ dài của văn bản mà nó chứa. Tất nhiên bạn sẽ cần phải đặt bất kỳ thuộc tính kiểu phông chữ nào để có được một giá trị hợp lý.

Theo quirksmode trang web Opera có thể hơi khó hiểu với cách tiếp cận này nhưng tôi nghi ngờ gần nhất bạn sẽ nhận được giải pháp hoàn toàn qua trình duyệt.

Nguồn

2009-08-01 20:45:33 AnthonyWJones

Biết mức độ rộng của dòng văn bản trong HTML cho các từ bọc và các ứng dụng khác

Trả lời

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