Текст CSS оправдывается с помощью межстрочного интервала

Есть ли способ автоматически оправдывать слова, используя интервал между буквами, каждый в своей строке, до определенной ширины, используя CSS?

Например, "Что-то вроде этого" будет выглядеть, ну, что-то вроде этого:

"Something like this" would look something like this

Есть ли ненавязчивый способ применить такой стиль к моему тексту? Я считаю, что чистый CSS не имеет этой опции (по крайней мере, не с версиями CSS до 3, у CSS3, похоже, есть свойство text-justify, но оно пока не поддерживается), поэтому js-решения также будут хороши.

Ответы

Ответ 1

Здесь script, который может это сделать. Это некрасиво, но, возможно, вы можете взломать его, чтобы удовлетворить ваши потребности. (Обновлено для обработки изменения размера)

<html>
<head>
<style>
#character_justify {
    position: relative;
    width: 40%;
    border: 1px solid red;
    font-size: 32pt;
    margin: 0;
    padding: 0;
}
#character_justify * {
    margin: 0;
    padding: 0;
    border: none;
}
</style>
<script>
function SplitText(node)
{
    var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");

    for(var i = 0; i < text.length; i++)
    {
        var letter = document.createElement("span");
        letter.style.display = "inline-block";
        letter.style.position = "absolute";
        letter.appendChild(document.createTextNode(text.charAt(i)));
        node.parentNode.insertBefore(letter, node);

        var positionRatio = i / (text.length - 1);
        var textWidth = letter.clientWidth;

        var indent = 100 * positionRatio;
        var offset = -textWidth * positionRatio;
        letter.style.left = indent + "%";
        letter.style.marginLeft = offset + "px";

        //console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);
    }

    node.parentNode.removeChild(node);
}

function Justify()
{
    var TEXT_NODE = 3;
    var elem = document.getElementById("character_justify");
    elem = elem.firstChild;

    while(elem)
    {
        var nextElem = elem.nextSibling;

        if(elem.nodeType == TEXT_NODE)
            SplitText(elem);

        elem = nextElem;
    }
}

</script>
</head>
<body onload="Justify()">
<p id="character_justify">
Something<br/>
Like<br/>
This
</p>
</body>

Ответ 2

Я знаю, что это старая тема, но я столкнулся с ней той ночью. И нашел подходящее решение с использованием таблиц.

Каждая буква должна быть помещена в <td> </td> Я знаю, что она выглядит утомительной, но если вы хотите сделать это, это будет слово или два, верно? Или вы всегда можете использовать JS, чтобы заполнить его, если это слишком много. Однако это только CSS и очень универсальное решение.

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

#justify {
  width: 300px;
  letter-spacing: 0.5em;
}

<table id="justify">
  <tbody>
    <tr>
      <td>J</td>
      <td>U</td>
      <td>S</td>
      <td>T</td>
      <td>I</td>
      <td>F</td>
      <td>Y</td>
    </tr>
  </tbody>
</table>

См. пример здесь

Крестовина безопасна, практически ничего не будет отличаться. Это просто CSS.

Я использовал его в Мой сайт, который находится на английском и испанском языках. подзаголовок под моим именем на испанском языке имеет дополнительную букву, и она выйдет за пределы ширины. Используя приведенные выше таблицы, он автоматически распределяется по той же ширине. Разместив его вручную, мне пришлось определить целое условие для каждого языка, чтобы обойти это.

Ответ 3

Вот еще один aproach, используя фрагмент jQuery, который я написал для этого вопроса: Растянуть текст, чтобы он соответствовал ширине div:

DEMO

HTML:

<div class="stretch">Something</div>
<div class="stretch">Like</div>
<div class="stretch">This</div>

jQuery:

$.fn.strech_text = function () {
    var elmt = $(this),
        cont_width = elmt.width(),
        txt = elmt.html(),
        one_line = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char = elmt.text().length,
        spacing = cont_width / nb_char,
        txt_width;

    elmt.html(one_line);
    txt_width = one_line.width();

    if (txt_width < cont_width) {
        var char_width = txt_width / nb_char,
            ltr_spacing = spacing - char_width + (spacing - char_width) / nb_char;

        one_line.css({
            'letter-spacing': ltr_spacing
        });
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};


$(document).ready(function () {
    $('.stretch').each(function () {
        $(this).strech_text();
    });
});

Ответ 4

Это тоже нужно, поэтому я включил предложенную технику в простой в использовании jquery-plugin, который вы можете найти здесь: https://github.com/marc-portier/jquery-letterjustify#readme.

Он использует ту же самую процедуру в своем ядре и добавляет некоторые параметры для настройки. Комментарии приветствуются.

Ответ 5

Единственное решение css - text-justify: distribute https://www.w3.org/TR/css-text-3/#text-justify, но поддержка по-прежнему очень плохая.

Небольшой эксперимент с использованием text-align-last: justify и добавление пробелов между буквами. 

div{
	display:inline-block;
	text-align: justify;
	text-align-last: justify;
	letter-spacing: -0.1em;
}
<div>
S o m e t h i n g<br>
l i k e<br>
t h i s
</div>

Ответ 6

Опять же, я знаю, что это ДЕЙСТВИТЕЛЬНО старый, но почему бы просто не поместить пробел между каждой буквой, а затем текст-align: justify? Тогда каждая буква будет считаться "словом" и соответствующим образом оправдана.

Ответ 7

Альтернативным способом справиться с этим может быть использование блока калибровки "vw". Этот тип устройства можно использовать в свойствах размера шрифта и представляет собой процент ширины окна.

Отказ от ответственности: Это не совсем то, что вы ищете, но не требует никаких сценариев. Он корректирует размер текста, но также масштабируется до ширины вашей страницы.

Например,

.heading {
  font-size: 4vw;
}

сделает ширину одного символа в текущем шрифте 4% ширины окна.

Затем вы можете использовать медиа-запросы, если хотите заблокировать размер шрифта до минимального размера в зависимости от ширины окна.

@media only screen and (max-width: 768px) {
    font-size: 2rem;
}

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

Блок "vw" работает в IE9 +, iOS 8.3+ и Android 4.4+ и всех других основных браузерах. Я бы не стал беспокоиться о мобильной поддержке слишком много, так как вы можете использовать медиа-запросы, чтобы поместить правильный размер для этих устройств, как описано выше.

http://caniuse.com/#feat=viewport-units

https://css-tricks.com/viewport-sized-typography/

Единицы просмотра являются мощным способом масштабирования множества различных аспектов вашего сайта с небольшим кодом.

Ответ 8

Я только что сделал JQuery script из таблицы Tony B. Вот JSFiddle https://jsfiddle.net/7tvuzkg3/7/

Этот script создает таблицу с каждым char в строке. Это работает с полным предложением. Я не уверен, что это полностью оптимизировано.

justifyLetterSpacing("sentence");

function justifyLetterSpacing(divId) {

	// target element
	domWrapper = $('#' + divId).clone().html('');
	// construct <td>
	$('#' + divId).contents().each(function(index){
      // store div id to td child elements class
	  var tdClass = divId ;
      // split text 
	  $textArray = $(this).text().split('');
      // insert each letters in a <td>
	  for (var i = 0; i < $textArray.length; i++) {
        // if it a 'space', replace him by an 'html space'
        if( $textArray[i] == " " )  {
            $('<td>')
                .addClass(tdClass)
                .html("&nbsp;&nbsp;")
                .appendTo(domWrapper);
        }// if it a char, add it
        else{  
            $('<td>')
                .addClass(tdClass)
                .text($textArray[i])
                .appendTo(domWrapper);
        }
	  }
	});
    // create table
    table = 
    $( "<table id='"+divId+"'/>" ).append( 
        $( "<tbody>" ).append( 
            $( "<tr>" ).append( 
                ( domWrapper ).children('td') 
            ) 
        )
    );
    // replace original div
	$('#' + divId).replaceWith( table );
}	
#sentence {
  width : 100%;
  background-color : #000;
  color : #fff;
  padding : 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sentence">LOREM IPSUM DOLOR</div>

Ответ 9

Что случилось с text-align: justify? Думаю, я мог бы не понимать ваш вопрос.