css - style - Envuelve el texto de abajo hacia arriba

title html css

Question

¿Alguien sabe cómo podría ajustar el texto en orden inverso, de abajo hacia arriba? Adjunto una imagen de ejemplo.

Pregunta refinada de PS: en lugar de romper la línea después de que esté llena y tener una línea incompleta al final ... Necesito frenar de alguna manera de abajo hacia arriba, así que las líneas de abajo están completas y la línea superior está incompleta.

Answer 1

Bueno, si eso depende del texto, entonces puedes probar algo como un sustituto de palabras. Por ejemplo

var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);

Aquí hay un violín para usted: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/

De lo contrario, no creo que pueda romper una línea dependiendo del número de caracteres en una línea.

Answer 2

Esta no es una solución formal para este problema. Pero mira si esto ayuda.

El código HTML

<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>

CSS:

#mydiv
{
    width:1000px;
    line-height:18px;
    font-size:20px;
    text-align:justify;
    word-break:break-all;
}

Aquí, establecer el ancho de div en torno a 50 veces el tamaño de fuente le dará el resultado preciso. Otros valores de ancho o valores de fuente pueden desorientar ligeramente la última línea, dando un espacio en blanco después del último carácter (aún no se pudo resolver esa parte).

JQuery:

$(document).ready(function(){
        //GET the total height of the element
        var height = $(''#mydiv'').outerHeight();

        //Get the height of each line, which is set in CSS
        var lineheight = $(''#mydiv'').css(''line-height'');

        //Divide The total height by line height to get the no of lines.
        var globalHeight = parseInt(height)/parseInt(lineheight);
        var myContent = $(''#mydiv'').html();
        var quotient = 0;

        //As long as no of lines does not increase, keep looping.
        while(quotient<=globalHeight)
        {
            //Add tiny single blank space to the div''s beginning
            $(''#mydiv'').html(''&#8239;''+myContent);

            //Get the new height of line and height of div and get the new no of lines and loop again.
            height = $(''#mydiv'').outerHeight();
            lineheight = $(''#mydiv'').css(''line-height'');
            quotient = parseInt(height)/parseInt(lineheight);
            myContent = $(''#mydiv'').html();
        }
        //get the final div content after exiting the loop.
        var myString = $(''#mydiv'').html();

        //This is to remove the extra space, which will put the last chars to a new line.
        var newString = myString.substr(1); 
        $(''#mydiv'').html(newString);
    });

Answer 3

No hay una solución css general para ello. Debes tener que utilizar la ayuda de cualquier idioma. Esta es una de las soluciones usando PHP:

<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>

Answer 4

No recomendaría el uso de atributos CSS exóticos que aún no están en Chrome y Firefox. La mejor solución para varios navegadores es manejar esto en Javascript cuando se carga el documento. Aquí hay un bosquejo de cómo hacer eso:

$(function() {
    $(".title").each(function(i,title) {
        var width = 0;
        var originalHeight = $(title).height();
        var spacer = $(''<div style="float:right;height:1px;"/>'').prependTo(title);
        while (originalHeight == $(title).height()) {
            spacer.width( ++width );
        }
        spacer.width( --width );
    });
});

JSFiddle de trabajo está aquí: http://jsfiddle.net/zephod/hfuu3m49/1/

Answer 5

Si ya sabe dónde desea que se realicen sus descansos, simplemente utilice saltos HTML simples para dividir su contenido y haga que se muestren de la manera que desea.

<p>This is what<br/>
want to acheive with your help</p>

Si establece los descansos manualmente (y sabe dónde quiere que se rompan), créelos usted mismo.

También puede intentar establecer ajustes de ancho de css separados en función de las dimensiones de la pantalla que está viendo la ruptura que no le está gustando y establecer una referencia de @media para que el ancho div sea más pequeño para romper el texto, de modo que no se desplace de manera desigual en Top de ciertos dispositivos de tamaño.

Answer 6

Wrap y Nowrap serán procesados ​​por el navegador del cliente, por lo que no puede forzar que el navegador se ajuste de abajo hacia arriba. pero puedes hacerlo con javascript o asp.