30

有没有办法使用 CSS 使用字母间距自动对齐单词，每个单词在其行中，以定义的宽度？

例如，“Something like this”看起来就像这样：

是否有一种不显眼的方式将这种样式应用于我的文本？我相信纯 CSS 没有这个选项（至少没有 3 之前的 CSS 版本，CSS3 似乎有一个text-justify属性，但它还没有得到很好的支持），所以 js 解决方案也可以。

4

10 回答 10

13

这是一个可以做到这一点的脚本。它不漂亮，但也许你可以破解它来满足你的需要。（更新以处理调整大小）

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;
  }
}
#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;
}
<body onload="Justify()">
  <p id="character_justify">
    Something<br/> Like
    <br/> This
  </p>
</body>

于 2010-12-04T19:06:33.170 回答
9

唯一的 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>

于 2017-08-03T11:56:13.427 回答
4

我知道这是一个老话题，但前几天晚上我遇到了这个问题。并使用表格找到了合适的解决方案。

每个字母都应该放在一个<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。

我在我的英文和西班牙文网站中使用了它。我名字下的西班牙语字幕有一个额外的字母，它会超出宽度。使用上面解释的表格，它会自动分配到相同的宽度。手动间隔我不得不为每种语言定义一个完整的条件来解决这个问题。

于 2014-05-16T18:37:54.900 回答
3

这是使用我为这个问题编写的 jQuery 片段的另一种方法：拉伸文本以适应 div 的宽度：

演示

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();
    });
});
于 2014-07-11T10:42:19.663 回答
2

也需要这个，所以我将建议的技术捆绑在一个简单易用的 jquery-plugin 中，您可以在这里找到：https ://github.com/marc-portier/jquery-letterjustify#readme 。

它的核心使用相同的程序，并添加了一些选项进行调整。欢迎评论。

于 2014-09-14T18:47:44.987 回答
0

再一次，我知道这真的很老了，但为什么不在每个字母之间放一个空格然后 text-align:justify 呢？然后每个字母都将被视为一个“单词”并相应地被证明是合理的

于 2014-08-15T03:30:04.690 回答
0

处理此问题的另一种方法可能是使用“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/viewport-sized-typography/

视口单元是一种强大的方式，可以用很少的代码来扩展站点的许多不同方面。

于 2015-04-30T23:39:42.287 回答
0

我刚刚从 table 的 Tony B 方法制作了一个 JQuery 脚本。这是 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>

于 2016-02-27T14:56:16.453 回答
0

找到了另一种使用纯 CSS 实现此目的的方法，唉，你需要拼出你的话。

在我的情况下，这是唯一有效的解决方案（有些字母有类），而且它还在这里的答案中产生了最直接的右对齐，而不使用黑客。

.box {
  width: min-content;
  border: solid red;
}

.word {
  display: flex;
  justify-content: space-between;
}
<div class="box">
  <div class="word">
    <span>S</span>
    <span>o</span>
    <span>m</span>
    <span>e</span>
    <span>t</span>
    <span>h</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>&nbsp;</span>
    <span>w</span>
    <span>i</span>
    <span>c</span>
    <span>k</span>
    <span>e</span>
    <span>d</span>
  </div>

  <div class="word">
    <span>t</span>
    <span>h</span>
    <span>i</span>
    <span>s</span>
    <span>&nbsp;</span>
    <span>w</span>
    <span>a</span>
    <span>y</span>
  </div>

  <div class="word">
    <span>c</span>
    <span>o</span>
    <span>m</span>
    <span>e</span>
    <span>s</span>
  </div>
</div>

于 2020-07-21T16:45:36.783 回答
0

我通常尽量按时写下我的答案。这是完全相同的时间（10年后）=）

myText.innerHTML = myText.textContent
    .split(/\s+/g)
    .map((line) => line.trim().split("").join(" "))
    .join("<br>");
#myText {
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
    letter-spacing: -0.125em;
    font-family: sans-serif;
}
<div id="myText">Something like this</div>

于 2021-07-01T01:27:46.373 回答