salto - ¿Cómo centrar un párrafo de texto en una palabra en particular en HTML, CSS o JavaScript?
justificar texto html (16)
desplace una palabra objetivo particular al mejor centro horizontal que las palabras permitirán
Puede lograr un centrado aproximado utilizando JavaScript bastante simple. Todo lo que hace es escanear a lo largo del marcado, convierte el primer TextNode que encuentra en "palabras" envueltas con <span> s, y luego las pruebas y errores insertan saltos de línea hasta que encuentra la palabra de destino más cercana a la centrar.
En el violín, he resaltado en rojo los vanos que el código considera que deben tener un descanso después, y verde para la palabra objetivo. En la mayoría de los casos lo hace bastante bien, hay algunos casos en los que puede terminar con una sola palabra en una línea; sin embargo, esto podría solucionarse ajustando el código a su caso de uso exacto.
En caso de que la gente no se dé cuenta, esta es una ilustración de lo que se puede lograr y de ninguna manera es perfecta: ningún código lo es, porque siempre se puede mejorar y debería serlo.
violín
violín actualizado que muestra el comportamiento con una palabra aleatoria dirigida:
margen
<center>
Once upon a time, there was a squirrel who lived in the
<span class="centered">middle</span> of the forest. I
say middle, but without knowing where the edges were,
the squirrel had no idea where the center was.
</center>
Sin embargo, como lo han dicho otros, debo mantener la etiqueta central. También he convertido el div interior en un tramo para preservar el espaciado en línea. Si esto no es posible para usted, aún puede usar un div, solo tendrá que anular su visualización normal para
display: inline-block;
JavaScript / jQuery
jQuery.fn.findYourCenter = function( target ){
base = $(this); target = base.children(target);
base.contents().eq(0).each(function(){
var i = -1, word, words, found, dif,
last = Infinity,
node = $(this),
text = node.text().split(//s+/),
cwidth = Math.round(target.width() * 0.5),
bwidth = Math.round(base.width() * 0.5),
breaks = 2 // code will try to insert 2 line breaks
;
node.replaceWith(
''<span class="word">''+text.join('' </span><span class="word">'')+'' </span>''
);
words = base.find(''.word'');
do {
while ( ++i < words.length ){
word && word.removeClass(''clear'');
word = words.eq(i).addClass(''clear'');
dif = Math.round(Math.abs((target.position().left + cwidth) - bwidth));
if ( dif < last ) { last = dif; found = i; }
}
word.removeClass(''clear'');
if ( found ) {
words.eq(found).addClass(''clear'');
i = found; found = word = null;
}
else {
break;
}
} while ( i < words.length && --breaks );
});
};
He usado jQuery por brevedad.
CSS
Necesitará este elemento CSS:
.clear:after {
content: '''';
display: block;
clear: both;
}
y quizás lo siguiente si su artículo .centered es un <div> :
.centered {
display: inline-block;
}
Entonces todo lo que necesitas ejecutar es:
jQuery(function($){
$(''center'').findYourCenter(''.centered'');
});
problemas
Para que las cosas sean precisas, tendrá que compensar algo, ya que, dependiendo de la longitud (y la ubicación) de las palabras, no siempre puede lograr el centro perfecto para el párrafo, la línea y la palabra de destino, todo al mismo tiempo. El código anterior aún mantiene la línea centrada, al costo de la palabra de destino que se está compensando. Podría mejorar lo anterior para realizar modificaciones de margen en la línea que contiene el intervalo objetivo, si desea centrar la palabra al costo de la línea.
Actualmente, si la palabra de destino aparece en las primeras cinco palabras, es poco probable que se logre el centrado, básicamente porque este método se basa en el ajuste de palabras y los saltos de línea. Si ninguno de los dos puede usarse debido a que la palabra está al principio del párrafo, entonces no se puede hacer nada: guardar para introducir margen, relleno o guiones de texto.
Este código se basa en poder leer la posición de los elementos <span> correctamente. Los navegadores más antiguos, por ejemplo, IE6 y las primeras versiones de Safari / Opera han tenido problemas con esto
Una cosa más a tener en cuenta. Este código se basa en que el navegador vuelva a calcular sus medidas internas inmediatamente en el mismo ciclo de ejecución síncrona. La mayoría de los navegadores modernos parecen hacer esto, en la mayoría de los casos, sin embargo, es posible que necesite implementar setTimeout(func, 0) o setImmediate delays para que esto funcione en sistemas más antiguos.
... y finalmente
Esta es una solicitud bastante loca, ¿para qué es exactamente? :)
Tengo un pasaje centrado en la página, como este:
_________________________
| |
| Once upon a time, there |
| lived a squirrel who |
| lived in the middle of |
| the forest. |
|_________________________|
Necesito ajustar el centrado de modo que una palabra marcada específicamente se centre horizontalmente en la página. En este ejemplo, la palabra "quién" está centrada:
_________________________
| |
| Once upon |
| a time, there lived a |
| squirrel who lived in |
| the middle of the |
| forest. |
|_________________________|
- La palabra que está marcada en el HTML con una etiqueta
<div>, es decir,<center>Once upon a time, there lived a squirrel <div style="centered">who</div> lived in the middle of the forest.</center>. - El HTML aparece en una aplicación en la que tengo poco control sobre la edición del propio HTML (el texto ya está marcado con etiquetas de estilo CSS), pero puede modificar la hoja de estilo o agregar código, como JavaScript al encabezado para modificar la forma en que ese estilo se representa
¿Cómo puedo centrar un pasaje en una palabra en particular en HTML, CSS o JavaScript?
¡Esta es una manera realmente genial de hacer esto usando javascript que hice solo para ti! jaja aquí está el violín http://jsfiddle.net/7Ykzp/2/
var words = text.split(" ");
Lo dividimos en palabras y luego tratamos de encajarlos en una línea. Lo colocamos en un centro entre dos centros que contienen el texto anterior y el siguiente.
una nota que agregamos 8 al ancho de línea cada vez que intentamos agregar dos palabras más para explicar el tamaño de los espacios
edición: se actualizó para ubicar de manera adecuada a quién según la longitud de la palabra
edit2: actualizado a ahora correctamente hacia atrás ¡envuelve el texto sobre la palabra centrada! ¡Echale un vistazo!
¿Es tu div un ancho fijo, o un ancho variable? Si es un ancho fijo (el ancho de demostración que ha dado), agregue la palabra anterior y siguiente a la div, y agregue
antes y después de.
Érase una vez, vivió un
ardilla que vivió
en medio del bosque ..
y luego alinear en el centro el párrafo.
.centered {text-align: center}
Si el div es un ancho variable, puede probar una función de JavaScript que acepta el ancho del div y el tamaño de la fuente como argumentos, y eso decidirá cuántas palabras (antes y después) se deben agregar.
Es una solución que básicamente trata de encajar tantas palabras en una línea como sea posible. Como se agrega una palabra después del "centro" para cada palabra que se agrega antes del "centro", su palabra debe permanecer en el medio.
¿Tienes un archivo CSS vinculado? Si lo haces, te recomendaría cambiar la etiqueta div a
<div class="who">who</div>
En el archivo CSS, deberías tener
.who {
text-align: center;
}
También es posible que fuerce el html para incluir espacios con el siguiente código: & nbsp (incluya un punto y coma al final, no me dejará hacerlo). Entonces, en lugar de tener un espacio, puede tener múltiples espacios que no sean de ruptura.
Como otros señalaron, no es posible hacerlo a través de html / Css, lo cual también estoy de acuerdo, pero puede hacer algún tipo de centrado basado en una línea (oración) en lugar de hacerlo por una palabra. Espero que esto te ayude !!
CSS:
.centered { display:inline-block; text-align:center;}
div { width:100%; text-align:center; }
HTML:
<div> <div class="centered"> Once upon a time, </div> there lived a <div class="centered"> squirrel who lived in </div> the middle of the forest. </div>
Actualización: Según lo señalado por @disule, he eliminado la etiqueta central desaprobada.
El método del leñador son las etiquetas <br/>
html:
<div class="center">
<p>Once upon<br>
a time, there lived a<br>
squirrel who lived in<br>
the middle of<br>
the forest.</p>
</div>
css:
.center {
width: auto;
text-align: center;
}
La única respuesta a lo que quieres lograr es: ¡ No es posible!
Y también dudo que tenga sentido. Para centrar una palabra en una línea ya centrada en un texto centrado, ¿para qué debería ser bueno?
Especialmente cuando se trata de fuentes y tamaños de fuente, hay tantas variables desconocidas (fuente utilizada, hojas de estilo de usuario, etc.), que cada intento basado en estas cosas fallará.
E incluso cualquier solución JS fallará, ya que es muy probable que debido a la longitud de las palabras no sea posible centrar exactamente la "palabra" en la línea sin cambiar / ajustar los espacios de las palabras antes y después de la "palabra" para obtenerla. absolutamente centrado.
Si realmente quieres un "coqueteo", ve y crea una imagen sobre la marcha. En una imagen puedes lograr tu objetivo. Con HTML, CSS y JS no lo harás.
Y si pienso en cosas tan útiles como la separación de CSS, realmente no tiene sentido para mí lo que estás tratando de lograr. Lamentablemente no respondiste en mi comentario sobre tu pregunta para qué debería servir todo esto.
La etiqueta central está en desuso y no es compatible con HTML5, así que no la use. En vez de eso, dale a tu clase .centered algunas reglas de CSS como esta:
.centered {
clear: both;
display: block;
text-align: center;
}
Sin embargo, esto le dará su propia línea. Si aún desea que el texto a su alrededor se ajuste, entonces tendrá que elegir sistemáticamente sus saltos de línea; no hay una forma actual de ajustar el texto alrededor de un nodo centrado, y float: center no existe ...
La forma más sencilla es simplemente insertar un salto de línea <br> después de cada línea:
Aquí hay un ejemplo de jsfiddle
HTML:
<div class="container">
<p>
Once upon<br>
a time, there lived a<br>
squirrel who lived in<br>
the middle of<br>
the forest.
</p>
</div>
CSS:
.container {
border: 1px solid #666;
padding: 1em;
width: auto;
text-align: center
}
La respuesta es, desafortunadamente, no puede hacer lo que está preguntando con HTML / CSS.
Para hacer esto, deberías establecer algunos anchos para forzar que el texto pase a la siguiente línea, o (preferiblemente) insertar una etiqueta <BR> donde quieras romper la línea. HTML y / o CSS no tienen forma de hacerlo por ti. Como Anderson señala a continuación, podrá encontrar una manera de hacerlo con JS si es necesario.
Puedes hacerlo simplemente de esta manera.
Código:
<div style="position:absolute; left:50%; margin-left:-108px;">
<pre>
_________________________
| |
| Once upon a time, there |
| lived a squirrel who |
| lived in the middle of |
| the forest. |
|_________________________|
</pre>
</div>
Si bien estoy de acuerdo en que la estructura html tiene problemas, mencionas que tienes "poco control" sobre ella, por lo que ofrezco esta respuesta únicamente con HTML tal como está. Sin tocar el HTML, la única forma de obtener esto con CSS puro es permitir que el contenido centrado exista en su propia línea. Así que esto funciona ( ver el violín ):
center {
text-align: center;
}
center div {
width: 100%; /* really, the div should default to this, but just in case */
}
Sin el salto de palabra, no puede estar seguro de que la palabra deseada esté centrada del mismo modo que la línea en la que se encuentra.
Aquí hay un texto diferente, la primera versión se centró en la palabra "quién", pero la línea no, el segundo en el opuesto:
_________________________
| |
| Once upon |
| a time, there lived a |
| squirrel who lived |
| somewhere else but |
| in the forest |
|_________________________|
_________________________
| |
| Once upon |
| a time, there lived a |
| squirrel who lived |
| somewhere else but |
| in the forest |
|_________________________|
Como puede ver, sin romper las palabras, se basa totalmente en el texto que tiene y la palabra que desea centrar, si es posible o no.
Debido a esto hay cuatro soluciones:
Ponga solo la palabra deseada en esa línea y luego intente asegurarse de que haya exactamente la misma línea antes que después. (Solo es posible si la palabra no es la primera o no la última o si es la única palabra en el texto, y si la palabra no se encuentra aproximadamente en la mitad del texto, es posible que termine con formas realmente arqueadas).
Cuente la posición de la palabra dentro del texto y luego divida las palabras antes y después para hacer coincidir el número de caracteres antes y después de la palabra en la misma línea.
Implemente una función de separación de palabras en el idioma del texto, y calcule todas las combinaciones de posibles saltos de línea y palabra para encontrar una (si la hay) en la que esté centrada la palabra deseada.
Codifíquelo usted mismo, hay cosas que un humano puede resolver de manera mucho más eficiente que un simple programa (todavía). Después de todo somos superordenadores bien agrupados.
Use CSS más específicamente en los elementos principales para orientar la alineación de sus palabras. Por ejemplo, si hay un párrafo (p) y luego, después de él, hay dos divs (div) y luego use la propiedad css principal específica como esta.
p div div {text-align:center; display:inline-block;}
eso es todo y hará el trabajo por ti. Del mismo modo, puede orientar su ejemplo dado con
center div {text-align:center; display:inline-block;}
[EDITAR] Añadido violín. Limpiado un poco de código. Fragmento actualizado a continuación. Comentarios añadidos.
[ORIGINAL] No creo que esto sea posible con css. Sin embargo, pensé que una solución podría ser posible con JavaScript. Así que lo probé, ¡y funcionó! Si bien esta podría no ser la solución definitiva, considere lo siguiente:
<div class="jsCenterOnPhrase">
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the <div class="jsCenteredPhrase">lazy dog.</div>
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
</div>
Luego descomponlo y reconstrúyalo, tal vez así:
jQuery(function ($) {
var $divParents = $(''.jsCenterOnPhrase''); // all instances
var sMarker = ''##''; // marker for phrase position
// for each instance
$divParents.each(function () {
// closures
var $parent = $(this);
var $phrase = $parent.find(''div.jsCenteredPhrase'');
// if there is only one phrase
if ($phrase.size() == 1) {
// more closures
var iParentWidth = $parent.innerWidth();
var sPhrase = $phrase.text();
var iPhraseWidth = $phrase.outerWidth();
$phrase.replaceWith(sMarker);
var sFullText = $parent.text().replace(//s+/g, '' '');
// add html structure to container
$parent.html(
''<span class="jsLeftWrap"></span>'' +
''<span class="jsCenterWrap">'' +
''<span class="jsCenterPrefix"></span>'' +
''<span class="jsCenterPhrase"></span>'' +
''<span class="jsCenterSuffix"></span>'' +
''</span>'' +
''<span class="jsRightWrap"></span>'');
// more closures
var $LeftWrap = $parent.find(''.jsLeftWrap'');
var $CenterWrap = $parent.find(''.jsCenterWrap'');
var $CenterPrefix = $parent.find(''.jsCenterPrefix'');
var $CenterPhrase = $parent.find(''.jsCenterPhrase'');
var $CenterSuffix = $parent.find(''.jsCenterSuffix'');
var $RightWrap = $parent.find(''.jsRightWrap'');
// get all the words left and right into arrays
var iLeftStart = 0;
var iLeftEnd = sFullText.indexOf(sMarker);
var iRightStart = iLeftEnd + sMarker.length;
var iRightEnd = sFullText.length - 1;
var sFullLeft = sFullText.substring(iLeftStart, iLeftEnd);
var sFullRight = sFullText.substring(iRightStart, iRightEnd);
var aFullLeft = sFullLeft.split('' '');
var aFullRight = sFullRight.split('' '');
// build out each word as a node
for (var i = 0; i < aFullLeft.length; i++) {
var sVal = aFullLeft[i];
if (sVal != '''') {
$(''<span> '' + sVal + '' </span>'').appendTo($LeftWrap);
}
}
for (var i = 0; i < aFullRight.length; i++) {
var sVal = aFullRight[i];
if (sVal != '''') {
$(''<span> '' + sVal + '' </span>'').appendTo($RightWrap);
}
}
// reset text as full html words
sFullLeft = $LeftWrap.html();
sFullRight = $RightWrap.html();
var fResize = function () {
// reset closures for dynamic sizing
$LeftWrap.html(sFullLeft);
$CenterPrefix.html('''').css(''padding-left'', 0);
$CenterPhrase.html('' '' + sPhrase + '' '');
$CenterSuffix.html('''').css(''padding-right'', 0);
$RightWrap.html(sFullRight);
iParentWidth = $parent.innerWidth();
// private variables
var $leftWords = $LeftWrap.find(''span'');
var $rightWords = $RightWrap.find(''span'');
var iMaxWidthRemaining = (iParentWidth - $CenterPhrase.outerWidth());
var iMaxSideWidth = Math.floor(iMaxWidthRemaining / 2);
var iLeftRemaining = iMaxSideWidth;
var iRightRemaining = iMaxSideWidth;
var iCurrentWidth = iPhraseWidth;
var iLeftIndex = $leftWords.size() - 1; // work backwards
var iRightIndex = 0; // work forwards
var iKerningTollerance = 2; // wraps too much sometimes
// loop trackers
var bKeepGoing = true;
var bKeepGoingRight = true;
var bKeepGoingLeft = true;
// loop while there is still room for the next word
while (bKeepGoing) {
// check the left side
if (bKeepGoingLeft) {
// get the next left word
var $nextLeft = $leftWords.eq(iLeftIndex);
var iLeftWordWidth = $nextLeft.outerWidth();
if (iLeftWordWidth < iLeftRemaining) {
// there''s enough room. add it.
$nextLeft.prependTo($CenterPrefix);
iLeftRemaining = iMaxSideWidth - $CenterPrefix.outerWidth();
iLeftIndex--;
} else {
// not enough room. add remaining room as padding
bKeepGoingLeft = false;
$CenterPrefix.css(''padding-left'', (iLeftRemaining - iKerningTollerance));
iLeftRemaining = 0;
}
}
// check the right side
if (bKeepGoingRight) {
// get the next right word
var $nextRight = $rightWords.eq(iRightIndex);
var iRightWordWidth = $nextRight.outerWidth();
if (iRightWordWidth < iRightRemaining) {
// there''s enough room. add it.
$nextRight.appendTo($CenterSuffix);
iRightRemaining = iMaxSideWidth - $CenterSuffix.outerWidth();
iRightIndex++;
} else {
// not enough room. add remaining room as padding
bKeepGoingRight = false;
$CenterSuffix.css(''padding-right'', (iRightRemaining - iKerningTollerance));
iRightRemaining = 0;
}
}
// is there room left on either side?
bKeepGoing = bKeepGoingLeft || bKeepGoingRight;
}
// calculate where to put the breaks.
var iTempWidth = iParentWidth;
while (iLeftIndex > 0) {
var $word = $leftWords.eq(iLeftIndex);
iTempWidth = iTempWidth - $word.outerWidth();
// account for kerning inconsistencies
if (iTempWidth <= (2 * iKerningTollerance)) {
$(''<br />'').insertAfter($word);
iTempWidth = iParentWidth;
} else {
iLeftIndex--;
}
}
};
// initial state
fResize();
$(window).resize(fResize);
}
});
});
[ACTUALIZADO PARA LA CONVENCIÓN NOMBRADA REQUERIDA ... style = "centrado" :)]
<div>
<p class ="center"> Once upon </p>
<p class ="center">a time, there lived a</p><p class = "center">squirrel who
lived in</p><p class = "center"> the middle of </p>
<p class = "center">
the forest.
</p>
</div>
Try This with css code:
.center{
text-align:center;
letter-spacing:2px;
}