Получение ширины html-контента внутри LI, ширина которого 100%

Question

В моем фрагменте мой OL имеет ширину CSS 100%. В моем jQuery я хочу получить ширину (например, offsetWidth в vanilla JS) содержимого внутри тега LI, но jQuery width() возвращает ширину LI, которая в итоге становится полной шириной браузера (вместо 140 пикселей).

$(document).ready(function(){
    
    alert($("#theOl li:eq(0)").width());
});

#theOl {
  border: 1px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol id="theOl">
  <li>This is some text
</ol>

Обратите внимание, что мне нужно, чтобы сама LI оставалась на 100% ширины.

Answer 1

Почему бы не обернуть <li> содержание в промежутке, и просто получить ширину этого?

$(document).ready(function(){
    
    alert($("#theOl li:eq(0) span").width());
});

#theOl {
  border: 1px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol id="theOl">
  <li><span>This is some text</span>
</ol>

Answer 2

Вам, вероятно, придется обернуть содержимое li элементом inline-block и получить ширину этого элемента, в противном случае вы получите ширину элемента li, которая является элементом списка и занимает 100% ширины его родительского элемента.

Answer 3

Вам нужно добавить: display: inline-block или же inline к li в вашем CSS. Я просто добавил прямо в HTML.

$(document).ready(function(){
    
    alert($("#theOl li:eq(0)").width());
});

#theOl {
  border: 1px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol id="theOl">
  <li style="display: inline-block">This is some text</li>
</ol>

Это происходит потому, что по умолчанию элемент имеет block дисплей, и это заставляет использовать все пространство контейнера.

Answer 4

Если это только HTML5, то можно использовать что-то вроде этого:

function getTextWidth(text) {
    var canvas = getTextWidth.canvas ||
        (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    return (context.measureText(text).width);
};

$(document).ready(function(){
    var content  = $("#theOl li:eq(0)").html();
    alert(getTextWidth(content));
})

Смотрите скрипку здесь: https://jsfiddle.net/7Lxuf285/1/

Одно улучшение можно сделать, передав размер шрифта в методе и установив его в контексте.

 context.font = font;

Смотрите скрипку со шрифтом: https://jsfiddle.net/7Lxuf285/2/