¿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 esto ocurra algo horrible:

alt text http://x01.co.uk/floated_items.gif

posibilidades:

• TRIM para un número determinado de caracteres antes de mostrar los datos. Requiere conjeturas sobre cuántos personajes serán "seguros".
• Desbordamiento: oculto. Hacky.
• Elimina el fondo y solo tiene un borde superior en cada elemento.

Posible pero tonta:

• Tener una barra de desplazamiento en cada elemento haciendo overflow: auto, 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.

¡Se agradece cualquier ayuda sobre este irritante problema!

Answer 1

¿Está utilizando un tamaño de fuente 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 asegura 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 2

Hay scripts que ayudan con esto al comparar el li en bloques de dos y hacer 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, debe considerar qué presentación desea, luego obtenga css/JavaScript para que obtenga el efecto deseado.

Si esto es algo que usted está queriendo fuera del camino, considerar el uso de una imagen de fondo de la pendiente que destaca la parte superior de la li y sugiere el bloque sin llegar a llenarlo en.

---

Adición enlace a una solución jQuery: Equalize

Answer 3

Una solución sería tener un archivo 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 en que el texto sea igual al contenedor, podría parecer un poco tonto.

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

Answer 4

Desde el punto de vista de la accesibilidad no es una buena idea simplemente ocultar el título, ya que podría ocultar el contenido de las personas que Aumenta 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 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 en sliding doors, donde la imagen de fondo se expande con el contenido.

Answer 5

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

Parece que tiene una grilla de datos para mí, ¿una tabla le 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 detrás? Puede aplicar el negro al fondo de la fila y luego crear el separador central blanco con bordes y márgenes.

Answer 6

Usted podría tratar de 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; 
} 

no sabe acerca de cruz consistensy navegador embargo. 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>