Вычисление ширины текста

Я пытаюсь вычислить ширину текста с помощью jQuery. Я не уверен, что именно, но я определенно делаю что-то не так.



Итак, вот код:



var c = $('.calltoaction');



var cTxt = c.text();



var cWidth =  cTxt.outerWidth();



c.css('width' , cWidth);
454   21  

21 ответов:

это работает лучше для меня:

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};
137  
2012-02-08 11:10:48

вот функция, которая лучше, чем другие размещены, потому что

  1. он короче
  2. он работает при прохождении <input>,<span> или "string".
  3. это быстрее для частого использования, потому что повторно использует существующий элемент DOM.

демо: http://jsfiddle.net/philfreo/MqM76/

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};
83  
2013-11-09 01:21:17

мое решение

$.fn.textWidth = function(){
    var self = $(this),
        children = self.children(),
        calculator = $('<span style="display: inline-block;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

в основном улучшение по сравнению с рунами, которые не используют .html так легко

36  
2013-08-19 00:30:00

функции ширины jQuery могут быть немного теневыми при попытке определить ширину текста из-за несогласованных моделей полей. Верным способом было бы ввести div внутри вашего элемента, чтобы определить фактическую ширину текста:

$.fn.textWidth = function(){
  var sensor = $('<div />').css({margin: 0, padding: 0});
  $(this).append(sensor);
  var width = sensor.width();
  sensor.remove();
  return width;
};

чтобы использовать этот мини-плагин, просто:

$('.calltoaction').textWidth();
11  
2009-10-17 20:05:39

The textWidth функции в ответах и которые принимают string в качестве аргумента не будут учитываться начальные и конечные пробелы (они не отображаются в фиктивном контейнере). Кроме того, они не будут работать, если текст содержит разметку html (подстрока <br> не будет производить никаких выходных данных и &nbsp; вернет длину одного пробела).

это только проблема для textWidth функции, которые принимают a string, потому что если дан элемент DOM, и .html() вызывается на элемент, то, вероятно, нет необходимости исправлять это для такого случая использования.

но если, например, вы вычисляете ширину текста для динамического изменения ширины текста input элемент как пользователь вводит (мой текущий вариант использования), вы, вероятно, захотите заменить начальные и конечные пробелы на &nbsp; и закодировать строку в html.

я использовал решение philfreo, поэтому вот его версия, которая исправляет это (с комментариями дополнения):

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').appendTo(document.body);
    var htmlText = text || this.val() || this.text();
    htmlText = $.fn.textWidth.fakeEl.text(htmlText).html(); //encode to Html
    htmlText = htmlText.replace(/\s/g, "&nbsp;"); //replace trailing and leading spaces
    $.fn.textWidth.fakeEl.html(htmlText).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};
10  
2013-08-07 20:15:18

Я нашел, что это решение работает хорошо, и оно наследует шрифт origin перед калибровкой:

$.fn.textWidth = function(text){
  var org = $(this)
  var html = $('<span style="postion:absolute;width:auto;left:-9999px">' + (text || org.html()) + '</span>');
  if (!text) {
    html.css("font-family", org.css("font-family"));
    html.css("font-size", org.css("font-size"));
  }
  $('body').append(html);
  var width = html.width();
  html.remove();
  return width;
}
7  
2012-02-01 18:03:12

ни Руна, ни мозг не работали на меня в случае, когда элемент, который удерживал текст, имел фиксированную ширину. Я сделал что-то похожее на Окамеру. Он использует меньше селекторов.

изменить: Это, вероятно, не будет работать для элементов, которые используют relative font-size, как следующий код вставляет htmlCalc элемент body таким образом, теряется информация о родительских отношениях. 

$.fn.textWidth = function() {
    var htmlCalc = $('<span>' + this.html() + '</span>');
    htmlCalc.css('font-size', this.css('font-size'))
            .hide()
            .prependTo('body');
    var width = htmlCalc.width();
    htmlCalc.remove();
    return width;
};
7  
2016-09-28 19:21:24

Если вы пытаетесь сделать это с текста в поле выбора или если эти два не работают, попробуйте это вместо этого:

$.fn.textWidth = function(){
 var calc = '<span style="display:none">' + $(this).text() + '</span>';
 $('body').append(calc);
 var width = $('body').find('span:last').width();
 $('body').find('span:last').remove();
 return width;
};

или

function textWidth(text){
 var calc = '<span style="display:none">' + text + '</span>';
 $('body').append(calc);
 var width = $('body').find('span:last').width();
 $('body').find('span:last').remove();
 return width;
};

Если вы хотите захватить текст первым

5  
2010-10-13 19:15:36

дело в том, что вы делаете неправильно, что вы вызываете метод на cTxt, который является простой строкой, а не объектом jQuery. cTxt-это действительно содержащийся текст.

4  
2009-10-17 19:54:09

небольшое изменение в Нико, так как .children () вернет пустой набор, если мы ссылаемся на текстовый элемент, например h1 или p. Так что будем использовать .содержание() вместо этого, и использовать этой вместо $(this), так как мы создаем метод на объекте jQuery.

$.fn.textWidth = function(){
    var contents = this.contents(),
        wrapper  = '<span style="display: inline-block;" />',
        width    = '';

    contents.wrapAll(wrapper);
    width = contents.parent().width(); // parent is now the wrapper
    contents.unwrap();
    return width;
    };
2  
2014-05-08 11:39:04

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

Итак, еще один совет-проверить, не вызывают ли пробелы проблемы. используйте 

&nbsp;

неразрывное пространство и посмотреть, если это исправляет его.

другие функции, которые люди предложили, тоже хорошо работают, но это были пробелы, вызывающие проблемы.

1  
2013-08-20 17:44:23

Если вы пытаетесь определить ширину смеси текстовых узлов и элементов внутри данного элемента, вам нужно обернуть все содержимое с помощью wrapInner(), вычислить ширину, а затем развернуть содержимое.

* Примечание: вам также нужно будет расширить jQuery, чтобы добавить функцию unwrapInner (), так как она не предоставляется по умолчанию.

$.fn.extend({
  unwrapInner: function(selector) {
      return this.each(function() {
          var t = this,
              c = $(t).children(selector);
          if (c.length === 1) {
              c.contents().appendTo(t);
              c.remove();
          }
      });
  },
  textWidth: function() {
    var self = $(this);
    $(this).wrapInner('<span id="text-width-calc"></span>');
    var width = $(this).find('#text-width-calc').width();
    $(this).unwrapInner();
    return width;
  }
});
1  
2013-11-01 08:04:11

расширяя ответ @philfreo:

я добавил возможность проверки text-transform, как вещи, как text-transform: uppercase обычно стремятся сделать текст шире.

$.fn.textWidth = function (text, font, transform) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text())
        .css('font', font || this.css('font'))
        .css('text-transform', transform || this.css('text-transform'));
    return $.fn.textWidth.fakeEl.width();
};
1  
2016-04-14 22:26:47 
var calc = '<span style="display:none; margin:0 0 0 -999px">' + $('.move').text() + '</span>';
0  
2011-04-09 18:03:33

вызов getColumnWidth (), чтобы получить с текста. Это прекрасно работает.

someFile.css
.columnClass { 
    font-family: Verdana;
    font-size: 11px;
    font-weight: normal;
}


function getColumnWidth(columnClass,text) { 
    tempSpan = $('<span id="tempColumnWidth" class="'+columnClass+'" style="display:none">' + text + '</span>')
          .appendTo($('body'));
    columnWidth = tempSpan.width();
    tempSpan.remove();
return columnWidth;
}

Примечание:- Если вы хотите, рядный .css передать шрифт-детали только в стиле.

0  
2013-11-27 10:43:28

Я изменил код Нико, чтобы работать для моих нужд.

$.fn.textWidth = function(){
    var self = $(this),
        children = self.contents(),
        calculator = $('<span style="white-space:nowrap;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

Я использую .содержание() как .дети() не возвращает текстовые узлы, которые мне нужны. Я также обнаружил, что на возвращенную ширину повлияла ширина видового экрана, которая вызывала обертывание, поэтому я использую white-space:nowrap; чтобы получить правильную ширину независимо от ширины видового экрана.

0  
2014-01-24 22:51:25 
$.fn.textWidth = function(){
        var w = $('body').append($('<span stlye="display:none;" id="textWidth"/>')).find('#textWidth').html($(this).html()[0]).width();
        $('#textWidth').remove();
        console.log(w);
        return w;
    };

почти один лайнер. Дает вам с первого символа

0  
2014-10-19 03:44:25

Я не мог получить ни одного из перечисленных решений для работы на 100%, поэтому придумал это гибрид, основанный на идеях от @chmurson (который, в свою очередь, был основан на @Okamera), а также от @philfreo:

(function ($)
{
    var calc;
    $.fn.textWidth = function ()
    {
        // Only create the dummy element once
        calc = calc || $('<span>').css('font', this.css('font')).css({'font-size': this.css('font-size'), display: 'none', 'white-space': 'nowrap' }).appendTo('body');
        var width = calc.html(this.html()).width();
        // Empty out the content until next time - not needed, but cleaner
        calc.empty();
        return width;
    };
})(jQuery);

Примечания:

  • this внутри метода расширения jQuery уже есть объект jQuery, поэтому нет необходимости во всех дополнительных $(this) что многие примеры есть.
  • он только добавляет фиктивный элемент в тело один раз и повторно использует оно.
  • вы также должны указать white-space: nowrap, просто чтобы убедиться, что он измеряет его как одна строка (а не перенос строки на основе другого стиля страницы).
  • я не мог заставить это работать с помощью font в одиночку и пришлось явно копировать font-size как хорошо. Не знаю, почему еще (все еще расследует).
  • этой не поддержка полей ввода таким образом @philfreo делает.
0  
2015-09-02 17:18:05

иногда вам также нужно дополнительно измерить высота и не только текст, но и HTML width. Я взял @ philfreo ответ и сделал его более гибким и полезным:

function htmlDimensions(html, font) {
  if (!htmlDimensions.dummyEl) {
    htmlDimensions.dummyEl = $('<div>').hide().appendTo(document.body);
  }
  htmlDimensions.dummyEl.html(html).css('font', font);
  return {
    height: htmlDimensions.dummyEl.height(),
    width: htmlDimensions.dummyEl.width()
  };
}
0  
2016-01-01 19:02:27

ширина текста может быть разной для разных родителей, например, если u добавить текст в тег h1, он будет шире, чем div или label, поэтому мое решение выглядит так:

<h1 id="header1">

</h1>

alert(calcTextWidth("bir iki", $("#header1")));

function calcTextWidth(text, parentElem){
    var Elem = $("<label></label>").css("display", "none").text(text);
    parentElem.append(Elem);
  var width = Elem.width();
  Elem.remove();
    return width;
}
0  
2018-02-21 11:07:34

Я думаю, что вы должны использовать $('.calltoaction').val;

кроме того, я бы использовал id (#) вместо класса для этого.. если у вас есть более одного из таких классов, как бы он справился с этим?

-1  
2009-10-17 19:32:25

Comments

    Ничего не найдено.
Click here to cancel reply.