0
263
VisualizaçõesHTML: 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 Respostas
Responde à pergunta0
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>