1

tengo dos parrafos separados, por una cuestión de estética a la hora de maquetar, y me gustaría concatenarlos. Les he dado un padding, para darles aire, pero quiero, que, a partir de los 960 px esos dos párrafos se conviertan en uno.

var parrafoUno = document.getElementById("firstParagraph").value;
var parrafoDos = document.getElementById("secondParagraph").value;


if ($(window).width() < 960) {

var parrafosUnidos = parrafoUno + parrafoDos;



};
.parrafosDivididos {

 display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	justify-content: center;

}


p {

	
	font-size: 1.3em;
	line-height: 1.8;
	color: rgb(118, 133, 165);
	text-align: justify;
	padding: 70px;
	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parrafosDivididos">
    <p id="firstParagraph">Esto es una prueba</p>
    
    <p id="secondParagraph"> para ver si puedo concatenar dos párrafos</p>

</div>

¿Cómo puedo unirlos para que quede la frase completa?

2 respuestas 2

1

Esto es algo que se podría hacer sin necesidad de JavaScript/jQuery, tan solo usando CSS y media queries.

La idea sería mantener tus estilos CSS, y añadir una media query que se ejecute sólo cuando el tamaño de la página sea menor que 960px. En esa media query harías que .parrafosDivididos no usara Flexbox y los párrafos serían inline en lugar de bloque por defecto. De ese modo aparecerían juntos como si fueran un único párrafo.

Aquí puedes ver un ejemplo de cómo sería (puede necesitar algún ajuste, pero es para que se vea la idea):

.parrafosDivididos {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  justify-content: center;
}

p {
  font-size: 1.3em;
  line-height: 1.8;
  color: rgb(118, 133, 165);
  text-align: justify;
  padding: 70px;
}

@media all and (max-width: 960px) {
  .parrafosDivididos {
    display: block;
    padding: 70px;
    padding: calc(70px + 1em) 70px; /* compensar margen perdido */
    text-align: center;
  }
  .parrafosDivididos p {
    display: inline;
    padding: 0;
  }
}
<div class="parrafosDivididos">
  <p id="firstParagraph">Esto es una prueba</p>
  <p id="secondParagraph"> para ver si puedo concatenar dos párrafos</p>
</div>

1
  • Muchas gracias Alvaro, aunque lo he modificado, lo tendré en cuenta para la próxima.
    – Paula
    el 29 may. 2019 a las 9:52
0

Tendrías que utilizar el método .resize(): El evento de cambio de resize se envía al elemento de la window cuando cambia el tamaño de la ventana del navegador. Con esto debería de funcionar, al decir que les das 'aire' es porque los separas por 70px, y para hacerlo uno solo pues sólo cambiamos el padding, eso se hace con el método .css(), espero sea lo que solicitas, cualquier duda hazla saber.

var parrafoUno = document.getElementById("firstParagraph").value;
var parrafoDos = document.getElementById("secondParagraph").value;

$(window).resize(function(){
if ($(window).width() < 960) {

$('p').css({
'font-size': '1.3em',
	'line-height': '1.8',
	'color': 'rgb(118, 133, 165)',
	'text-align': 'justify',
	'padding': '3px'

});
var parrafosUnidos = parrafoUno + parrafoDos;

}else if($(window).width() > 960 ){

$('p').css({
'font-size': '1.3em',
	'line-height': '1.8',
	'color': 'rgb(118, 133, 165)',
	'text-align': 'justify',
	'padding': '70px'

});

}

});
.parrafosDivididos {

 display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	justify-content: center;

}


p {

	
	font-size: 1.3em;
	line-height: 1.8;
	color: rgb(118, 133, 165);
	text-align: justify;
	padding: 70px;
	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parrafosDivididos">
    <p id="firstParagraph">Esto es una prueba</p>
    
    <p id="secondParagraph"> para ver si puedo concatenar dos párrafos</p>

</div>

1
  • Hola, gracias por tu respuesta. He optado por poner un único párrafo finalmente. Probé tu solución pero no funciona.
    – Paula
    el 28 may. 2019 a las 8:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.