Wiedząc, jak szeroki będzie tekst w języku HTML do zawijania słów i innych aplikacji

Czy znasz dobrze w różnych przeglądarkach sposób, aby wiedzieć, jak szeroki będzie tekst linii, aby można go złamać dokładnie w celu dopasowania do stałej szerokości?Wiedząc, jak szeroki będzie tekst w języku HTML do zawijania słów i innych aplikacji

Załóżmy, że chcesz złamać długi tekst, aby nie przepełniał on kontenera o stałej szerokości, ale chcesz, aby linia łamała się najbliżej granicy, więc zgadywanie gdzie wstawić s nie jest czyste rozwiązanie.

Chcę zbadać, wyobrażam sobie, że można to zrobić, mając niewidoczną div, a następnie wydrukując linię wewnątrz i sprawdzając szerokość div, lub coś w tym stylu, z Javascriptem.

Czy ktoś zrobił coś takiego?

* (ostrość jest nie słowo owijanie, to po prostu aplikacja, która przychodzi mi do głowy teraz, ale znając szerokość tekstu jest to, co chcę)

Źródło

2009-08-01 Petruza

Zobacz http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

@Josef: Odpowiedź w tym pytaniu może mieć wpływ na wizualny wygląd strony. W szczególności w IE może powodować pojawienie się poziomego paska przewijania bez wyraźnego powodu dla użytkownika. – AnthonyWJones

@AnthonyWJones: Rozumiem, może warto rozważyć również dodanie swojej odpowiedzi? –

Powyżej znajduje się pełna „Heath Robinson” (robi to odwołanie dobrze podróżować?).

<!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>

Najważniejszą rzeczą jest tutaj konfiguracja elementu span. Ten element nie wpłynie na wygląd strony. Właściwość scrollWidth zwróci długość tekstu, który zawiera. Oczywiście musisz ustawić wszystkie atrybuty stylu czcionki, aby uzyskać rozsądną wartość.

Strona Opery może być trochę niestabilna z tego podejścia, ale podejrzewam, że jest najbliżej rozwiązania w pełni z przeglądarki.

Źródło

2009-08-01 20:45:33 AnthonyWJones

Wiedząc, jak szeroki będzie tekst w języku HTML do zawijania słów i innych aplikacji

Odpowiedz

Powiązane problemy