Как рассчитать ширину всплывающего окна под размер строки?

Question

[Максим Морозов]

Имеем строку известной длинны. Нам нужно показать всплывающее окно с явным указанием ширины. Как рассчитать ширину этого окна, чтобы влезла вся строка?

Умножать .length на ширину самой широкой буквы (Ж или Щ) - не предлагать. Для больших строк не подходит.

Comments

[Кирилл]

Использовать моноширинный шрифт и умножать .length на ширину любой буквы))

[Максим Морозов]

Кирилл Кубляков: не вариант =)

Answer 1

[Денис Букреев]

а width: auto - не подойдет?
странная задача

Comments

[Алексей Уколов]

Кстати, да. Только вкупе с white-space: nowrap.

[Денис Букреев]

Алексей Уколов: именно
навыдумывают себе странных задач и еще все пытаются скриптами решать

[Максим Морозов]

width: auto растянет блок на всю страницу.

[Денис Букреев]

Максим Морозов: а если сделать его inline-block?

[Максим Морозов]

Денис Букреев: разобрался =) Там лишние стили унаследовались. С inline-block всё как надо работает.

Answer 2

[Алексей Уколов]

Нормального варианта решения этой задачи, насколько я знаю, не существует.
Я вижу два костыля:

1. Хранить ширину каждого возможного символа и собирать из них общую ширину. То ещё удовольствие. Плюс, шрифт у пользователя может быть какой угодно.
   
2. Делать окно какой-то фиксированной ширины, вставлять туда текст и проверять высоту - если равна одной строке, то пытаться сжимать окно на какое-то количество пикселей, пока текст не перестанет помещаться. Если высота больше одной строки, то последовательно увеличивать. Нужно подобрать способ при котором окно не будет мелькать перед глазами пользователя, но который позволит получать корректные размеры окна и обрабатывать всякие граничные значения.
   

Answer 3

[Алексей]

Попробуйте jsfiddle.net/philfreo/MqM76
Взято отсюда stackoverflow.com/questions/1582534/calculating-te...
Но у меня есть сомнения что это будет всегда адекватно работать.

Answer 4

[Константин Громов]

На длину строки сильно влияет CSS, потому, чтобы рассчитать её виртуально, нужно как минимум знать окружение в которое она вставится. И даже если знать всё-равно это сложно и глупо. Мне видится самым простым обернуть строку в элемент с white-space: nowrap и в момент рендера брать ширину этого элемента через offsetWidth и ставить её окну.