Textbreite berechnen

Ich versuche, die Textbreite mit jQuery zu berechnen. Ich bin mir nicht sicher was, aber ich mache definitiv etwas falsch.

Also, hier ist der Code:

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

Das hat bei mir besser funktioniert:

$.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;
};

Hier ist eine Funktion, die besser ist als andere, weil

1. es ist kürzer
2. es funktioniert , wenn ein Übergang <input>, <span>oder "string".
3. Für häufige Anwendungen ist es schneller, da ein vorhandenes DOM-Element wiederverwendet wird.

Demo: 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();
};

Meine Lösung

$.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;
};

Grundsätzlich eine Verbesserung gegenüber Runes, die nicht .htmlso leichtfertig genutzt wird

Die textWidthin den Antworten angegebenen Funktionen, die a stringals Argument akzeptieren, berücksichtigen keine führenden und nachfolgenden Leerzeichen (diese werden nicht im Dummy-Container gerendert). Sie funktionieren auch nicht, wenn der Text ein HTML-Markup enthält (eine Unterzeichenfolge <br>erzeugt keine Ausgabe und  gibt die Länge eines Leerzeichens zurück).

Dies ist nur ein Problem für die textWidthFunktionen, die a akzeptieren string, denn wenn ein DOM-Element angegeben ist und .html()auf das Element aufgerufen wird, besteht wahrscheinlich keine Notwendigkeit, dies für einen solchen Anwendungsfall zu beheben.

Wenn Sie beispielsweise die Breite des Texts berechnen, um die Breite eines Textelements inputwährend der Benutzertypen dynamisch zu ändern (mein aktueller Anwendungsfall), möchten Sie wahrscheinlich führende und nachfolgende Leerzeichen durch  die Zeichenfolge ersetzen und diese codieren zu html.

Ich habe die Lösung von philfreo verwendet. Hier ist eine Version davon, die dies behebt (mit Kommentaren zu Ergänzungen):

$.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();
};

Die Breitenfunktionen von jQuery können aufgrund inkonsistenter Boxmodelle etwas zwielichtig sein, wenn versucht wird, die Textbreite zu bestimmen. Der sichere Weg wäre, div in Ihr Element einzufügen, um die tatsächliche Textbreite zu bestimmen:

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

Um dieses Mini-Plugin zu verwenden, einfach:

$('.calltoaction').textWidth();

Ich fand, dass diese Lösung gut funktioniert und die Ursprungsschriftart vor der Größenänderung erbt:

$.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;
}

Weder Runes noch Brains arbeiteten für mich, falls das Element, das den Text enthielt, eine feste Breite hatte. Ich habe etwas Ähnliches wie Okamera gemacht. Es werden weniger Selektoren verwendet.

BEARBEITEN: Es wird wahrscheinlich nicht für Elemente funktionieren, die relative verwenden font-size, da der folgende Code ein htmlCalcElement einfügt , bodywodurch die Informationen über die Elternbeziehung verloren gehen.

$.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;
};

Wenn Sie versuchen, dies mit Text in einem Auswahlfeld zu tun, oder wenn diese beiden nicht funktionieren, versuchen Sie stattdessen Folgendes:

$.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;
};

oder

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;
};

Wenn Sie zuerst den Text abrufen möchten

Die Sache, die Sie falsch machen, ist, dass Sie eine Methode für cTxt aufrufen, die eine einfache Zeichenfolge und kein jQuery-Objekt ist. cTxt ist wirklich der enthaltene Text.

Leichte Änderung an Nico, da .children () eine leere Menge zurückgibt, wenn wir auf ein Textelement wie h1 oder p verweisen . Also verwenden wir stattdessen .contents () und dies anstelle von $ (this), da wir eine Methode für ein jQuery-Objekt erstellen.

$.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;
    };

Nachdem ich zwei Tage lang einem Geist nachgejagt hatte, um herauszufinden, warum die Breite eines Textes falsch war, wurde mir klar, dass Leerzeichen in der Textzeichenfolge die Breitenberechnung stoppen würden.

Ein weiterer Tipp ist, zu überprüfen, ob die Leerzeichen Probleme verursachen. verwenden

 

nicht unterbrechender Raum und sehen Sie, ob dies das Problem behebt.

Die anderen Funktionen, die die Leute vorgeschlagen hatten, funktionierten ebenfalls gut, aber es waren die Leerzeichen, die Probleme verursachten.

Wenn Sie versuchen, die Breite einer Mischung aus Textknoten und Elementen innerhalb eines bestimmten Elements zu bestimmen, müssen Sie den gesamten Inhalt mit wrapInner () umbrechen , die Breite berechnen und dann den Inhalt auspacken.

* Hinweis: Sie müssen jQuery auch erweitern, um eine unwrapInner () -Funktion hinzuzufügen, da diese nicht standardmäßig bereitgestellt wird.

$.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;
  }
});

Erweiterung der Antwort von @ philfreo:

Ich habe die Möglichkeit hinzugefügt, nach zu suchen text-transform, da Dinge wie text-transform: uppercasenormalerweise dazu neigen, den Text breiter zu machen.

$.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();
};

var calc = '<span style="display:none; margin:0 0 0 -999px">' + $('.move').text() + '</span>';

Rufen Sie getColumnWidth () auf, um den Text abzurufen. Das funktioniert einwandfrei.

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;
}

Hinweis: - Wenn Sie Inline-CSS möchten, übergeben Sie die Schriftdetails nur im Stil.

Ich habe Nicos Code so geändert, dass er meinen Anforderungen entspricht.

$.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;
};

Ich verwende .contents (), da .children () keine von mir benötigten Textknoten zurückgibt. Ich habe auch festgestellt, dass die zurückgegebene Breite durch die Breite des Ansichtsfensters beeinflusst wurde, was zu einem Umbruch führte. Daher verwende ich Leerzeichen: nowrap; um die richtige Breite unabhängig von der Breite des Ansichtsfensters zu erhalten.

$.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;
    };

fast ein Einzeiler. Gibt dir das mit des ersten Charakters

Ich konnte keine der aufgelisteten Lösungen zu 100% zum Laufen bringen und entwickelte diesen Hybrid , basierend auf Ideen von @chmurson (der wiederum auf @Okamera basierte) und auch von @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);

Anmerkungen:

• thisIn einer jQuery-Erweiterungsmethode befindet sich bereits ein jQuery-Objekt, sodass nicht all das Extra benötigt wird $(this), das viele Beispiele haben.
• Das Dummy-Element wird dem Körper nur einmal hinzugefügt und wiederverwendet.
• Sie sollten auch angeben white-space: nowrap, nur um sicherzustellen, dass es als einzelne Zeile gemessen wird (und nicht als Zeilenumbruch basierend auf einem anderen Seitenstil).
• Ich konnte dies nicht fontalleine zum Laufen bringen und musste auch explizit kopieren font-size. Ich weiß noch nicht warum (untersucht noch).
• Auf diese Weise werden Eingabefelder nicht unterstützt @philfreo.

Manchmal müssen Sie zusätzlich die Höhe und nicht nur den Text , sondern auch die HTML-Breite messen . Ich nahm die Antwort von @philfreo und machte sie flexibler und nützlicher:

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()
  };
}

Die Textbreite kann für verschiedene Eltern unterschiedlich sein. Wenn Sie beispielsweise einen Text in das h1-Tag einfügen, ist dieser breiter als div oder label. Meine Lösung lautet also wie folgt:

<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;
}

Ich hatte Probleme mit Lösungen wie @ rune-kaagaard für große Textmengen. Ich habe folgendes entdeckt:

$.fn.textWidth = function() {
	var width = 0;
	var calc = '<span style="display: block; width: 100%; overflow-y: scroll; white-space: nowrap;" class="textwidth"><span>' + $(this).html() + '</span></span>';
	$('body').append(calc);
	var last = $('body').find('span.textwidth:last');
	if (last) {
			var lastcontent = last.find('span');
			width = lastcontent.width();
			last.remove();
	}
	return width;
};

JSFiddle GitHub

Ich denke, Sie sollten verwenden $('.calltoaction').val;

Außerdem würde ich dafür id (#) anstelle einer Klasse verwenden. Wenn Sie mehr als eine dieser Klassen haben, wie würde es damit umgehen?