Скрытие переполнения SPAN

Я пытаюсь создать виджет в стиле combobox (совместимый с jquery-ui), и в настоящее время я пытаюсь получить статический макет отсортированного поля. Проблема в том, что у меня длинный текст в области значений для выбора, который он не обрезает в Firefox (на самом деле он переносится). Я не хочу этого и пробовал различные комбинации overflow: hidden white-space: nowrap и т. д., Но в Firefox он все еще переносится. Пример кода ниже.

<a href = "#" class = "ui-widget ui-widget-content ui-custom-button ui-state-default ui-corner-all ui-helper-reset" style = "padding-left:5px;text-decoration: none; width: 139px; ">
    <span style = "float:right;margin-top:1px;border-left:1px solid #D3D3D3;" class = "ui-custom-button-icon ui-icon ui-icon-triangle-1-s" ></span>
    <span style = "line-height:1.5em;font-size:10px;margin-top:1px;overflow:hidden;height:16px;">If the text is very long then somethin</span>
</a>

Может ли кто-нибудь помочь в этом?

Я это понимаю - я обычно использую встроенные стили при прототипировании на лету, пока не буду удовлетворен. Это позволяет мне быстрее управлять ими в Firebug. Но спасибо за конструктивный отзыв :-P

— 20.01.2009 13:57

Проверьте свойство css overflow-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wr‌ ap

— 07.02.2018 17:12

css

20.01.2009 13:52

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

50 846

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проблема в том, что промежутки - это встроенные элементы, и вы не можете установить ширину или высоту встроенных элементов.

И поскольку контроль переполнения основан на размерах блока, это не сработает.

Однако, начиная с Firefox 3.0, есть поддержка

  display: inline-block

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

Если вы делаете это на лету в firebug, некоторые вещи в макете будут вести себя иначе из-за перекомпоновки. Поместите его в таблицу стилей и перезагрузите страницу, и иногда он ведет себя иначе.

— 20.01.2009 14:02

Я бросил это в таблицы стилей и получил тот же результат. Я подозреваю, что это связано с классами / атрибутами, назначенными далее в таблице стилей. Спасибо, в любом случае

— 20.01.2009 14:20

20.01.2009 13:56

Ответ принят как подходящий

Попробуйте присвоить элементу display:block или замените SPAN элементом уровня блока, например DIV.

И снова SO решила 30-минутную проблему всего за 5 секунд. +1

— 24.06.2011 18:44

20.01.2009 13:57