CSS文字与字母间距合理

StackOverflow https://stackoverflow.com/questions/4355009

题

是否有一种方法可以使用字母间距自动为单词辩护，每个字母在行中，使用CSS自动为定义的宽度合理吗？

例如，“这样的东西”看起来像这样：

"Something like this" would look something like this

是否有一种非引人注目的方式将这种样式应用于我的文本？我相信纯CSS没有此选项（至少在3个之前使用CSS版本，CSS3似乎有一个 text-justify 财产，但尚未得到很好的支持），因此JS解决方案也可以。

有帮助吗？

解决方案

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

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>

其他提示

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>

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

每个字母应放入 <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>

在这里查看示例

Crossbrowser安全，几乎没有任何不同。只是CSS。

我用它 我的网站 用英语和西班牙语。我以西班牙语名称的字幕还有一封额外的字母，它将走出宽度。使用上面解释的表，它会自动分配到相同的宽度。手动间隔我必须定义每种语言的整体条件。

这是我为这个问题写的jQuery片段的另一个abrect子： 拉伸文本适合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();
    });
});

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

它在其核心上使用相同的过程，并添加了一些调整的选项。欢迎评论。

同样，我知道这真的很旧，但是为什么不只是在每个字母之间放置一个空间，然后在文本平行之间放置一个空间：Jusify呢？然后每个字母都被视为“单词”，并相应地证明

处理此问题的另一种方法可能是使用“大众”尺寸单元。该单元类型可用于字体大小属性，代表窗口宽度的百分比。

免责声明： 这并不是您要寻找的内容，但不需要脚本。它确实调整了文本大小，但也将扩展到页面宽度。

例如， 

.heading {
  font-size: 4vw;
}

将在窗口宽度的当前字体中使一个字符的宽度宽度。

然后，如果您希望根据窗口的宽度将字体大小锁定至最小尺寸，则可以使用媒体查询。

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

使用浏览器检查器使用字体大小的属性，并调整值对您的应用程序有意义的值。

“大众”单元在IE9+，iOS 8.3+和Android 4.4+以及所有其他主流浏览器中工作。我不必担心移动支持太多，因为您可以使用媒体查询来为这些设备提供正确的尺寸，如上所述。

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

https://css-tricks.com/viewport-sied-typocraphy/

视口单元是一种有力的方法，可以用很少的代码扩展网站的许多不同方面。

我刚刚从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>

出什么问题了 text-align: justify？我认为我可能会误解您的问题。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top