Как обернуть текст, который не содержит пробелов в HTML-кнопке

Question

Я создаю HTML-кнопки автоматически. Представитель кнопка, созданная в этом автоматическом режиме выглядит следующим образом:

<input type="button" value="Expected_Performance_of_the_ATLAS_Experiment,_Vol._3.pdf" onclick="location.href='Expected_Performance_of_the_ATLAS_Experiment,_Vol._3.pdf';"><br> 

Имена файлов и этажерка могут стать довольно долго, так что мне нужно осуществить перенос текста кнопки. Я знаю the trick с участием использования CSS свойств белого пространства (например

style="width: 600 px; 
white-space: normal;" 

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

Answer 1

Edit: В Firefox это не работает, однако, делает работу, если применить его к <button> элемента вместо <input type="button"> элемента.

Updated jsFiddle

---

Вы могли бы рассмотреть вопрос об использовании свойства CSS word-wrap:break-word;. Это заставляет текст обертывать, независимо от того, имеет ли он пробел или нет.

jsFiddle (см редактирования)

(Source)

Насколько мне известно, нет CSS свойство давать приоритеты для различных разделителей в тексте. Это, вероятно, должно быть каким-то образом достигнуто с помощью JavaScript.

Answer 2

Вы не можете указать поведение разрыва строки с любой точностью CSS. Он в основном находится под контролем браузера, и он зависит от браузера. Теоретически вы можете вставлять символы U + 200B ZERO WIDTH SPACE в атрибут, но они, похоже, не заслуживают внимания браузерами (вероятно, из-за того, что отображение текста кнопки отличается от обычного рендеринга текста).

Как @Tanner предлагает, это лучший подход, чтобы поместить имя файла за пределы кнопки, сохраняя текст кнопки очень коротким. Это полезно для удобства использования. И если у вас проблемы с разбивкой строк с именем файла, они могут быть гораздо лучше устранены, когда имя файла отображается как обычный текст; например, U + 200B (​) хорошо работает при определении допустимых точек разлома.

В качестве альтернативы просто создайте ссылки на имена файлов, так как это действительно будет использоваться для button, за исключением того, что метод button, используемый здесь, не работает, когда JavaScript отключен. При желании вы можете стилизовать ссылки так же, как кнопки с CSS - контент будет по-прежнему являться текстом, где проблемы с разрывом строк более удобны, чем в текстах button.