有没有办法使用 CSS 使用字母间距自动对齐单词,每个单词在其行中,以定义的宽度?
例如,“Something like this”看起来就像这样:
是否有一种不显眼的方式将这种样式应用于我的文本?我相信纯 CSS 没有这个选项(至少没有 3 之前的 CSS 版本,CSS3 似乎有一个text-justify
属性,但它还没有得到很好的支持),所以 js 解决方案也可以。
有没有办法使用 CSS 使用字母间距自动对齐单词,每个单词在其行中,以定义的宽度?
例如,“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>
跨浏览器安全,几乎没有什么不同。只是CSS。
我在我的英文和西班牙文网站中使用了它。我名字下的西班牙语字幕有一个额外的字母,它会超出宽度。使用上面解释的表格,它会自动分配到相同的宽度。手动间隔我不得不为每种语言定义一个完整的条件来解决这个问题。
这是使用我为这个问题编写的 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();
});
});
也需要这个,所以我将建议的技术捆绑在一个简单易用的 jquery-plugin 中,您可以在这里找到:https ://github.com/marc-portier/jquery-letterjustify#readme 。
它的核心使用相同的程序,并添加了一些选项进行调整。欢迎评论。
再一次,我知道这真的很老了,但为什么不在每个字母之间放一个空格然后 text-align:justify 呢?然后每个字母都将被视为一个“单词”并相应地被证明是合理的
处理此问题的另一种方法可能是使用“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/
视口单元是一种强大的方式,可以用很少的代码来扩展站点的许多不同方面。
我刚刚从 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(" ")
.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>
找到了另一种使用纯 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> </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> </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>
我通常尽量按时写下我的答案。这是完全相同的时间(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>