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

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

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

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

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

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

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

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

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

Конечно, в сочетании с display: hidden и white-space: no-wrap

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

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

Вот вам какое-то противоречие .. использовать таблицу?

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

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

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

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>