Обтекание текста снизу вверх

Ответ 1

Я бы не рекомендовал использовать экзотические атрибуты CSS, которые еще не существуют в Chrome и Firefox. Лучшее кросс-браузерное решение - обрабатывать это в Javascript при загрузке документа. Здесь набросок того, как это сделать:

$(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 находится здесь: http://jsfiddle.net/zephod/hfuu3m49/1/

Ответ 2

Для этого нет общего решения css. Вы должны использовать помощь любого языка. Это одно из решений с использованием 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);
?>

Ответ 3

Ну, если это зависит от текста, вы можете попробовать что-то вроде замены слова. Например

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

Вот вам скрипка: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/

В противном случае, я не думаю, что вы можете разбить строку в зависимости от количества символов в строке.

Ответ 4

Wrap и Nowrap будут отображаться клиентом-браузером, поэтому вы не сможете заставить браузер обернуть снизу вверх. но вы можете сделать это с помощью javascript или asp.

Ответ 5

Это не формальное решение этой проблемы. Но посмотрите, поможет ли это.

КОД 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;
}

Здесь установка ширины div в 50 раз больше, чем размер шрифта, даст вам точный результат. Другие значения ширины или значения шрифта могут немного дезориентировать последнюю строку, давая пробел после последнего символа (пока не удалось решить эту часть).

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 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);
    });

Ответ 6

Если вы уже знаете, где вы хотите, чтобы ваши перерывы имели место, просто используйте простые перерывы HTML, чтобы разорвать ваш контент и отобразить его так, как вы хотите.

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

Если вы установите разрывы вручную (и знаете, где вы хотите их разбить), создайте их самостоятельно.

Вы также можете попробовать установить отдельные настройки ширины CSS, основанные на размерах экрана, который вы видите, что вам не нравится, и установить ссылку @media, чтобы уменьшить ширину div, чтобы сломать текст, чтобы он не запускался неравномерно на верхней части устройств определенного размера.

Ответ 7

Использовать display: inline-block; на текст div.