Какова лучшая комбинация UI / CSS при отображении строк неизвестной длины?

Question

У меня есть список элементов, которые я отображаю в плавающем списке, причем каждый элемент в списке имеет фиксированную ширину, поэтому в каждой строке по два Как лучше всего предотвратить эту ужасную вещь:

альтернативный текст http://x01.co.uk/floated_items.gif

Possibilites:

• Обрезать до указанного количества символов перед отображением данных. Требуется угадать, сколько символов будет «в безопасности».
• Переполнение: скрыто. Hacky.
• Удалите фон и просто установите верхнюю границу для каждого элемента.

Возможно, но глупо:

• Сделайте полосу прокрутки в каждом элементе, выполнив переполнение: авто, это будет выглядеть ужасно.
• Добавить фоновое изображение в контейнер. Не гарантируется, что всегда будет одинаковое количество предметов, поэтому эта опция отсутствует.

Любая помощь по этому раздражающему вопросу приветствуется!

Answer 1

Вы используете фиксированный размер шрифта, то есть указанный в px? Если нет, вам также необходимо рассмотреть различные параметры размера текста каждого браузера, что, вероятно, сделает концепцию обрезки строки избыточной. Если он исправлен, то, возможно, посмотрев, сколько символов W вы можете вписать, и ограничив свой текст этим -3, и добавив многоточие, не уверен, для чего этот список, так что это один подход.

Лично я бы, вероятно, использовал переполнение: скрытое, поскольку оно покрывает все возможные ситуации и гарантирует, что оно всегда будет поддерживать согласованность вашего макета.

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

Answer 2

Существуют сценарии, которые помогают с этим, сравнивая li в блоках по два и делая их равными самым высоким.

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

Если это то, что вы просто хотите убрать с пути, подумайте об использовании градиентного фонового изображения, которое выделяет верхнюю часть li и предлагает блок, фактически не заполняя его.

---

Добавление ссылки в решение jQuery: Выравнивание

Answer 3

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

ul li{
  display:block;
  float:left;
  width:6em;
  height:4em;
  background-color:black;
  color:white;
  margin-right:1em;
}
ul{
  height:100%;
  overflow:hidden;
}
div{
  height:3em;
  overflow:hidden;
  background-color:blue;
}

Не знаю о кроссбраузерности. РЕДАКТИРОВАТЬ: Это HTML, я предполагаю:

<div>
<ul>
<li>asdf
<li>asdf trey  tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>

Answer 4

Вот некоторые споры для вас .. использовать таблицу?

Звучит так, как будто у вас есть сетка данных, может ли таблица решить эту проблему для вас?

Это также поднимает вопрос: хотите ли вы, чтобы предметы были одинаковой высоты или просто имели такое же количество черного фона позади них? Вы можете применить черный цвет к фону строки, а затем создать центральный белый разделитель с границами и полями.

Answer 5

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

Теперь, если я правильно понимаю вашу проблему с фоновым изображением, я думаю, что ваша проблема может быть решена с помощью методов, описанных в статье ALA о раздвижных дверях , где фоновое изображение расширяется вместе с содержимым.

Answer 6

Одним из решений было бы использование PNG на основе альфа-канала, который будет постепенно затенять текст до фонового цвета вашего контейнера, последние 10 пикселей или около того. Это выглядело бы хорошо, если бы некоторый текст был значительно короче длинного, но в случае, когда текст был бы равен контейнеру, он мог бы выглядеть немного глупо.

Конечно, в сочетании с дисплеем: скрытый и пробел: без переноса