Как я могу сбалансировать текст по нескольким строкам?

Ответ 1

ответ 2016: CSS4:

 text-wrap: balance;

Сделаем это. https://drafts.csswg.org/css-text-4/#text-wrap

Там также пакет, который реализует polyfill для существующих браузеров.

Здесь демонстрация баланса текста.

Ответ 2

Если я понимаю, о чем вы спрашиваете (и если да, то общая тема "use justify" не совсем делает это), я не думаю, что вы сможете избежать написания справедливого бита JavaScript.

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

Формула: ширина одной строки = ширина текста /roundUp (ширина текста/ширина контейнера)

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

var widthOfText = functionToGetWidthOfText(width); //==120
var widthOfContainer = container.width(); //==100
var containerWidth = widthOfText / ceil(widthOfText/widthOfContainer);
// containerWidth = 120 / ceil(120/100) == 120 / 2 == 60
var formattingTextContainer.width = containerWidth
// text would go inside the formattingTextContainer, which would
// give you 2 lines of equal, 60px width

Однако проблема с этим заключается в создании функции functionToGetWidthOfText. После некоторого быстрого поиска все, что я нашел, это этот вопрос, где ответ заключается в...

Оберните текст в диапазоне и используйте jquery width()

то есть. поместите его в элемент и измерьте, насколько он широк... вы могли бы сделать это за пределами экрана где-нибудь/удалить его после достаточно быстрого, чтобы никто не видел его, но это, вероятно, займет довольно много строк JavaScript! (Я мог бы исследовать это больше после работы...)

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

Ответ 3

Вы можете использовать родительский тег, такой как DIV и стиль, который имеет ширину = 50%. Это сделало бы текст более строгим.

Ответ 4

Я боюсь, что нет никакого способа сделать это в CSS, поэтому я просто обыскал его и нашел его здесь split-large-string-in-n-size-chunks-in-javascript А ТАКЖЕ counting-words-in-string

Я собираюсь взять это как вызов и написать для него функцию:)

попробуйте и повторно выведите число слов и найдите длину в два раза меньше, чем это:

function chunkString(str, length) {
  length = length/2;
  return str.match(new RegExp('.{1,' + length + '}', 'g'));
}

.....

text-align: justify. Я не уверен, правильно ли у меня вопрос, но, глядя на твою репутацию, я боюсь ответить на это!:)

поместите текст в p или span, убедитесь, что он display: block, inline-block выполнит задание. ширина каждого элемента должна составлять 50% от родительского элемента. то text-align: justify дочерний элемент.

Ответ 5

Просто укоротите ширину элемента, удерживающего этот текст.

https://jsfiddle.net/cqmwqgbj/

some code

Ответ 6

Я создал exmaple с text-align: justify и без text-align: justify.

Посмотрите:

    .center {width:200px; float:left; margin-left: 20px;}
    .justify { text-align: justify; }
      

 
    <!-- 4. -->
    <section class="center">
      <p class="justify">orem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section class="center">
      <p class="">orem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

Ответ 7

Вы можете поместить текст в div и использовать свойства width и text-align css.

HTML:

<div id="center">This is an example of a piece of text that will wrap to two lines.This is an example of a piece of text that will wrap to two
lines.</div>

CSS:

#center{
  width : 100px;
  text-align : justify;
}

Ответ 8

Поскольку, похоже, нет готовых решений, я написал относительно простую функцию jQuery, чтобы делать то, что хочу. Здесь это на случай, если кто-то ищет его.

Он работает, клонируя элемент, который мы хотим настроить. Клон скрыт, чтобы он не мигал, когда он был введен в DOM. Затем мы делаем клон более узким по одному пикселю за раз, пока он не обернется. Ширина перед этим происходит, затем устанавливается на исходный элемент, и элемент clone удаляется.

Лучшие способы достижения этого по-прежнему приветствуются, а также предложения по улучшению этого. Codepen можно найти здесь: http://codepen.io/Kaivosukeltaja/pen/jWYqZN

function adjust() {
  $('.quote').each(function() {
    // Create an invisible clone of the element
    var clone = $(this).clone().css({
      visibility: 'hidden',
      width: 'auto'
    }).appendTo($(this).parent());
    
    // Get the bigger width of the two elements to be our starting point
    var goodWidth = Math.max($(this).width(), $(clone).width());
    var testedWidth = goodWidth;
    var initialHeight = $(clone).height();

    // Make the clone narrower until it wraps again, causing height to increase
    while($(clone).height() == initialHeight && testedWidth > 0) {
      goodWidth = testedWidth;
      testedWidth--;
      $(clone).width(testedWidth);
    }

    // Set original element width to last one before wrap
    $(this).width(goodWidth);
    
    // Remove the clone element
    $(clone).remove();
  });
}

$(window).resize(adjust);
$(document).ready(function() {
  adjust();
});

body {
  background-color: #f0f0f0;
}

.holder {
  text-align: center;
  margin: 2em auto;
}
.quote {
  display: inline-block;
  border: 1px solid #c0c0c0;
  background-color: #fff;
  padding: 1em;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <div class="quote">
    If I want text to wrap, I want the lines as close to equal length as possible.
  </div>
</div>