Matriz de Objeto, tengo que dividir una lista en 3 filas que contienen Línea, que separan dos columnas, entonces, tengo que escribir el siguiente código:
HTML let Arr = [ { num: 'jkjjk' }, { num: 'jkjjk' }, { num: 'jkjjkkj dshdjsh jhsjhsdj' }, { num: 'jkjjkkj dshdjsh jhsjhsdj' }, { num: 'jkjjkkj ' }, { num: 'jkjjkkj jhsjhsdj' } ]; {Arr.map((element) => ( <ul className={divide}> <li>{element.num}</li> </ul> )} <div> CSS .divide { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 40px; column-rule: 1px solid rgba(0, 0, 0, 0); }Funciona para mí, pero la lista de elementos no está alineada correctamente. En una fila, el elemento de la primera columna está en la parte superior y el resto de los elementos de las columnas están en el medio o en la parte inferior de la fila, por lo tanto, quiero alinear todo el Elemento en la columna en la parte superior,
Nota: - La falta de coincidencia de alineación puede deberse a que el elemento String tiene demasiada longitud, es por eso que crea un problema,
Sugiérame como resolver esto
Probar:
<ul className="divide"> {Arr.map((element) => ( <li>{element.num}</li> )} </ul>CSS
.divide li { word-break: break-all; }