css - que - outerhtml

¿Cuál es la mejor combinación de UI/CSS cuando se muestran cadenas de longitud desconocida?

Question

Tengo una lista de elementos que estoy mostrando en una lista flotante, con cada elemento en la lista con un ancho fijo para que haya dos por fila. ¿Cuál es la mejor práctica para evitar que ocurra lo horrible?

texto alternativo http://x01.co.uk/floated_items.gif

Posibilidades:

• Recorte a un número específico de caracteres antes de mostrar los datos. Requiere conjeturas sobre cuántos personajes serán "seguros".
• Desbordamiento: oculto. Hacky.
• Elimina el fondo y solo tienes un borde superior en cada elemento.

Posible pero tonto

• Tener una barra de desplazamiento en cada elemento haciendo desbordamiento: automático, esto se verá horrible.
• Agregue una imagen de fondo al contenedor. No se garantiza que siempre haya un número igual de elementos, por lo que esta opción está desactivada.

¡Cualquier ayuda sobre este irritante problema apreciada!

Answer 1

Desde el punto de vista de la accesibilidad, no es una buena idea simplemente ocultar el título, ya que eso podría ocultar el contenido en personas que aumentan el tamaño de las fuentes debido a la mala vista. Su diseño debe poder flotar cuando se golpea con malas resoluciones u obstrucciones similares, incluso si flota en algo menos agradable a la vista.

Ahora bien, si entiendo correctamente su problema con la imagen de fondo, creo que su problema podría resolverse utilizando las técnicas descritas en el artículo de ALA sobre puertas correderas , donde la imagen de fondo se expande con el contenido.

Answer 2

¿Estás usando un tamaño de letra fijo, es decir, especificado en px? Si no, también debe tener en cuenta las diversas opciones de tamaño de texto de cada navegador, lo que probablemente hará que el concepto de recortar la cadena sea redundante. Si se soluciona, tal vez viendo cuántos Ws puede caber y restringiendo su texto a ese -3 y añadiendo puntos suspensivos, no estoy seguro de para qué sirve esta lista, así que ese es uno de los enfoques.

Personalmente, probablemente utilizaría el desbordamiento: oculto ya que cubre todas las eventualidades y garantiza que siempre mantendrá su diseño constante.

Supongo que la última opción sería mantener un control estricto sobre lo que se puede agregar a la lista y evitar el problema en primer lugar. La prevención es mejor que curar, como dicen, aunque probablemente sea inútil.

Answer 3

Hay guiones que ayudan con esto comparando el li en bloques de dos y haciendo que ambos sean iguales al más alto.

Por lo general, en lugar de pensar qué es lo mejor desde un punto de vista css, debes considerar qué presentación quieres, luego obtener css / JavaScript para que obtengas el efecto deseado.

Si esto es algo que solo desea, considere usar una imagen de fondo de degradado que resalte la parte superior de la li y sugiera el bloque sin llenarlo realmente.

Agregar enlace a una solución jQuery: ecualizar

Answer 4

Una solución sería tener un PNG basado en alfa que desvaneciera lentamente el texto al color de fondo de su contenedor, en los últimos 10px más o menos. Eso se vería bien si algunos textos son considerablemente más cortos que los largos, sin embargo, en el caso de que el texto sea igual al contenedor, podría parecer un poco tonto.

Por supuesto, en combinación con la pantalla: espacio oculto y blanco: no-wrap

Answer 5

Aquí hay algo de controversia para ti ... usa una tabla?

Parece que tienes una grilla de datos para mí, ¿una tabla te respondería este problema?

También plantea la pregunta, ¿realmente desea que los artículos tengan la misma altura o que solo tengan la misma cantidad de fondo negro? Puede aplicar el negro al fondo de la fila y luego crear el separador central blanco con bordes y márgenes.

Answer 6

Puedes intentar usar:

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;
}

Sin embargo, no sé sobre cross browser consistentemente. EDITAR: Este es el html que estoy asumiendo:

<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>