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

Question

Мне нужно установить максимальное значение видимости для тега метки и избежать переполнения текста с помощью jquery.

Есть ли элегантный способ сделать это?

Answer 1

Укажите ширину, width: 50px (скажем), на этикетке. Поскольку label является встроенным элементом, вам также необходимо указать display: block.

Теперь, что вы хотите сделать в случае переполнения? Если вы просто хотите скрыть неподходящий текст, используйте overflow: hidden. Если вы хотите, чтобы он был перенесен на следующую строку, он автоматически сделает это в соответствии с приведенными выше спецификациями, если только не будет длинного фрагмента неразрывного текста (т.е. без пробелов). В этом случае вам нужно определить строку символов, которая будет слишком длинной (я использовал 15 в приведенном ниже примере), и вставить пробел между ними:

$('#wrap').text($('#wrap').text().replace(/(\S{15})/g, '$1 '));

Answer 2

Вы можете использовать класс:

... в css

.elegance{
  overflow:hidden;
  max-width:400px; /* or just width, depending on what you want*/
  display:inline-block;
}

... на документе готово

$("label").addClass("elegance");

Или просто оберните вокруг него div, используя

$("label").wrap("<div class='elegance'></div>");

Если вы не хотите использовать отдельный css, вы можете установить его на лету, используя .css ()

Answer 3

Вы можете сделать это:

$("label").wrap("<div style='width: 200px;'></div>");

Или, лучше всего, использовать CSS следующим образом:

.labelWrap { width: 200px; }

И jQuery, как это использовать его:

$("label").wrap($("<div />", {"class":"labelWrap"}));