CSS текст выровнять с межбуквенным интервалом - PullRequest
Новая
       29

CSS текст выровнять с межбуквенным интервалом

25 голосов
/ 04 декабря 2010

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

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

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

Ответы [ 9 ]

11 голосов
/ 04 декабря 2010

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

<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>
5 голосов
/ 03 августа 2017

Решение css only: 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>
4 голосов
/ 16 мая 2014

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

Каждая буква должна быть помещена в <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 голосов
/ 11 июля 2014

Вот другой подход, использующий фрагмент 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();
    });
});
2 голосов
/ 14 сентября 2014

Это тоже нужно, поэтому я объединил предложенный метод в простой в использовании jquery-плагин, который вы можете найти здесь:

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

0 голосов
/ 27 февраля 2016

Я только что сделал скрипт JQuery из подхода Tony B. Вот JSFiddle https://jsfiddle.net/7tvuzkg3/7/

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

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's a 'space', replace him by an 'html space'
        if( $textArray[i] == " " )  {
            $('<td>')
                .addClass(tdClass)
                .html("&nbsp;&nbsp;")
                .appendTo(domWrapper);
        }// if it's 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>
0 голосов
/ 01 мая 2015

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

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

Например, 

.heading {
  font-size: 4vw;
}

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

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

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

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

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

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

https://css -tricks.com / видовой экран размером-типографики /

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

0 голосов
/ 15 августа 2014

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

0 голосов
/ 04 декабря 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...