如何在多行上均匀平衡文本

How can I evenly balance text over multiple lines?

本文关键字：平衡 文本      更新时间：2023-09-26

我想显示一小段文本，可以换行到两行或三行。它位于一个高度视觉化的元素中，出于样式目的，我希望线条的长度尽可能相等，更喜欢一行而不是两条线。

取而代之的是：

这是一段文本的示例，它将换行为两个

线。

我想要这个：

这是一块

将换行为两行的文本。

但我不想限制文本容器的宽度：

这段文字足够长，勉强能容纳两行。它

不应换行到三行或更多行，因此没有宽度限制。

有没有办法在纯CSS或可以容忍的JavaScript中做到这一点？

CSS 文本模块 4 属性：

 text-wrap: balance;

会这样做。https://drafts.csswg.org/css-text-4/#text-wrap

还有一个包为现有浏览器实现了 polyfill。

这是

余额文本的演示。 [存档副本]

如果我理解你在问什么（如果我理解了，"use justify"的一般主题并不完全做到），我认为你无法避免编写相当多的JavaScript。

我能看到执行您要求的唯一方法是将文本的宽度与容器的宽度进行比较，并相应地进行调整。

公式：单行宽度=文本宽度/舍入（文本宽度/容器宽度）

即（可能需要一些调整以防止将单词切成两半）

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

但是，这样做的问题是，制作"函数到获取文本的宽度"。经过一些快速搜索，我发现的只是这个堆栈溢出问题，答案是......

将文本换行到一个范围并使用 jquery width（）

即把它放在一个元素中并测量它的宽度......你也许可以在屏幕外的某个地方执行此操作/在足够快没有人看到它之后删除它，但这可能需要相当多的 JavaScript 行！（我可能会在下班后更多地调查这个问题...

您无法在不渲染的情况下完全计算出宽度的原因是由于可以使用各种字体类型和大小来表示它。因此，如果您始终使用确切的字体类型和字体大小，则可以编写一个函数来执行此操作而无需呈现它。

我创建了一个带有文本对齐：对齐和不带文本对齐：对齐的示例。

看看：

    .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>

由于似乎没有现成的解决方案，我写了一个相对简单的jQuery函数来做我想做的事情。这是以防其他人正在寻找一个。

它通过克隆我们要调整的元素来工作。克隆是隐藏的，以防止它在注入 DOM 时闪烁。然后，我们一次使克隆变窄一个像素，直到它必须包裹。然后，将发生这种情况之前的宽度设置为原始元素并删除克隆元素。

实现这一目标的更好方法仍然受到欢迎，改进此方法的建议也是如此。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's 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>

您可以使用父标签（如 DIV）和样式，宽度=50%。这将使案文有更多的行数。

恐

怕在 CSS 中没有办法做到这一点，所以我只是搜索了它并在这里找到它 split-large-string-in-n-size-chunks-in-JavaScript和在字符串中计算单词

我将以此为挑战，并为其编写一个函数:)

尝试正则表达式单词的数量并找到其中一半的长度，然后这个：

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子元素。

您可以将文本放入div 中，并使用宽度和文本对齐的 css 属性：

#center{
  width : 100px;
  text-align : justify;
}
<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>

只需缩短包含此文本的元素的宽度：

div {
    width: 210px;
}
<div>This is an example of a piece of text that will wrap to two lines.</div>

相关文章：