Рассчитать ширину текстового узла в элементе уровня блока с помощью jQuery

Question

Скажите, у меня есть:

<div>Some variable amount of text.</div>

Как я могу получить ширину (в пикселях) текста в div?

Имейте в виду, что объем текста будет непредсказуемымот div до div.

Спасибо!

Answer 1

Звучит так, как будто вы хотите ширину содержимого, а не самого div, как предоставили другие. Я думаю, что вам нужно будет обернуть содержимое в промежуток, чтобы вы могли измерить ширину промежутка. Div всегда будет максимально широким. Вам нужно что-то, что сворачивается до размера контента, который вы можете измерить.

Answer 2

Лучший способ, который я нашел, это использовать правило CSS "display:inline;", чтобы связать только textNode данного HTML-элемента, а затем использовать offsetWidth метод JS.

<div style="display:inline;" id="gotWidthInPixels" >Some variable amount of text.</div>
<script>
  //either:
  var widthInPixels= $('#gotWidthInPixels')[0].offsetWidth; 
  //or
  var widthInPixels= document.getElementById("gotWidthInPixels").offsetWidth;
</script>

Это даст вам точную ширинув пикселях любого элемента HTML.

Answer 3

У меня были некоторые странные проблемы, когда пробельные символы были нарушены при вычислении ширины в jquery. точно не знаю почему, если это было из-за строковых переменных и конкатенации, или из среды JMVC, или просто из jQuery.

Но, делая пробелы неразрывными пробелами

 

казалось, решил это. просто выбросить это на случай, если это поможет.

Answer 4

относительно @mrtsherman, если вы хотите ширину только текста, который вы можете использовать

var myDiv = $('#myDiv'); 

//div width
var textWidth = sb.width();

//remove padding and margin from left and right
textWidth -= parseInt(sb.css('padding-left') ) + parseInt(sb.css('margin-left') );
textWidth -= parseInt(sb.css('padding-right') ) + parseInt(sb.css('margin-right') );

Answer 5

Просто используйте width () примерно так:

<div id="mydiv">text text text</div>
<script>
alert( $('#mydiv').width() );
</script>

Answer 6

var w = $('div').width()

или используйте любой другой селектор для div