Какова лучшая комбинация UI/CSS при отображении строк неизвестной длины?
Используя map() в соответствии с запросом:
const ageData = [...Array(71)].map((x, i) => ({value: i + 10}));
console.log(ageData); Сначала создайте массив с длиной 71. Разрушаем массив, давая [undefined, undefined, ..., undefined]. Затем, используя map(), выполните итерацию по массиву и верните индекс плюс 10.
6 ответов
Вы используете размер фиксированного шрифта, т.е. указанные в пкс? Если не также необходимо рассмотреть различные возможности размера текста каждого браузера, который, вероятно, собирается сделать понятие обрезки строки избыточным. Если это фиксируется, затем, возможно, видя, сколько Ws можно поместиться и ограничение текста к этому-3 и добавлению замещающего знака, не уверенного, что этот список для того, таким образом, это - один подход.
Лично я, вероятно, использовал бы overflow:hidden в качестве этого, покрывает все возможности и гарантирует, что это будет всегда сохранять Ваше расположение последовательным.
Я предполагаю, что последняя опция состояла бы в том, чтобы сохранить жесткий контроль над тем, что может быть добавлено к списку и предотвратить проблему, происходящую во-первых. Предотвращение лучше, чем средство исправления, как они говорят, хотя, вероятно, бесполезно.
Существуют сценарии, которые помогают с этим, сравнивая литий в блоках два и заставляя их обоих равняться самому высокому.
Обычно, вместо того, чтобы думать, что лучше всего из точки зрения CSS, хотя, необходимо рассмотреть, какую презентацию Вы хотите, затем заставьте css/JavaScript получать Вас к Вашему желаемому эффекту.
Если это - что-то, что Вы просто желаете из пути, рассматриваете использование фонового изображения градиента, которое выделяет вершину лития и предлагает блок, на самом деле не заполняя его.
Добавление ссылки к решению jQuery: Компенсировать
Одно решение состояло бы в том, чтобы иметь основанный на альфе PNG, который будет медленно исчезать текст к backgroundcolor Вашего контейнера на последних 10 пкс или около этого. Это выглядело бы хорошим, если бы некоторый текст значительно короче, чем длинные, однако в случае, где текст был бы равен контейнеру, это могло выглядеть довольно глупым.
Конечно, в сочетании с дисплеем: скрытый и пробел: без переносов
С точки зрения доступности это не хорошая идея просто скрыть заголовок, так как это могло скрыть содержание на людях, которые увеличивают размеры шрифта из-за плохого зрения. Ваш дизайн должен смочь плавать, когда поражено плохими разрешениями или подобными преградами, даже если он плавает во что-то менее приятное для глаз.
Теперь, если я понимаю Вашу проблему с фоновым изображением правильно, я полагаю, что Ваша проблема могла бы быть решена с помощью методов, описывает в статье АЛАБАМЫ о раздвижных дверях, где фоновое изображение расширяется с содержанием.
Вы могли попытаться использовать:
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;
}
Не знайте о перекрестном браузере consistensy все же.Править: Это - 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>
Вот некоторое противоречие для Вас.. использовать таблицу?
Кажется, что у Вас есть сетка данных мне, таблица ответила бы на эту проблему для Вас?
Это также поднимает вопрос, Вы на самом деле хотите, чтобы объекты были той же высотой или просто имели ту же сумму черного фона позади них? Вы могли применить черный цвет к образованию строки, затем создать центр белый разделитель с границами и полями.