0
264
VistasHTML: texto además de div en una línea cuando se agregan espacios
tengo html-
https://jsfiddle.net/nko8p6fr/
Se puede ver que, en el texto -texto muy largo; hay 2 espacios.
Quiero texto largo y para traer en una línea.
La primera línea debe contener solo una palabra, descanse todas las palabras en la segunda línea.
Algo como esto -
¿Cómo puedo lograrlo?
<div style='padding:12'> <div style='background-color:red;display:inline-block;height:2.5rem;width:2.5rem;float:left;'> <span style='vertical-align:middle;float:left;color:black;font-weight:bold;margin-left:20%;margin-top:15%'>7</span><div style='color:black;margin-left:140%;margin-top:3%;vertical-align:middle;width:50%'>very long text</div></div><br><br><br><br> Nota: - Esta cantidad de <br es necesaria para que se agreguen más bloques y para mantener el espacio entre ellos.
2 Respuestas
Responde la pregunta0
Te compartiré mi truco. Yo uso entre dos palabras que siempre quiero que estén juntas, así que en un texto muy largo puedes escribir un texto very long text .
significa espacio sin descanso.
Por último, le sugiero que se adhiera al HTML semántico, el hábito resultará muy útil en el futuro y siempre hay una manera sin comprometer la semántica.
Por ejemplo, proporcione una clase para el margen en la parte inferior para generar un espacio entre div(s) y eliminar <br>
0
Tal vez cambie el enfoque sobre cómo construye el código. hay muchas propiedades css útiles como grid o flexbox . aquí está el ejemplo usando flex
.c1 { border: 1px solid red; display: flex; align-items: center; gap: 10px; } .c2 { background: red; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } .c3 span { display: block; border: 1px solid green; } <div style='padding:12;'> <div style='background-color:red;display:inline-block;height:2.5rem;width:2.5rem;float:left;'> <span style='vertical-align:middle;float:left;color:black;font-weight:bold;margin-left:20%;margin-top:15%'>7</span> <div style='color:black;margin-left:140%;margin-top:3%;vertical-align:middle;width:100%;'> <span class="break">very</span> long text </div> </div> <br><br><br><br> <div class="c1"> <div class="c2"> 7 </div> <div class="c3"> <span>very</span> long text </div> </div>