Текст CSS оправдывает с интервалом письма
https://stackoverflow.com/questions/4355009
-
08-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли способ автоматически обосновать слова, используя интервал письма, каждый в строке, к определенной ширине, с помощью CSS?
Например, «что-то вроде этого» будет выглядеть, хорошо, что-то вроде этого:
Есть ли не навязчивый способ применять такой стиль к моему тексту? Я считаю, что чистые CSS нет этой опции (по крайней мере, не с версиями CSS до 3, 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 Safe, практически ничего не будет отличаться. Это просто 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..
Он использует ту же процедуру в его ядре и добавляет некоторые варианты настроить. Комментарии Добро пожаловать.
Опять же, я знаю, что это действительно старое, но почему бы не просто поместить пространство между каждой буквой, а затем выравнивание текста: оправдать? Затем каждая буква будет рассматриваться как «слово» и оправдано соответственно
Альтернативный способ обработки этого может быть использование блока размера «VW». Этот тип блока может использоваться в свойствах размера шрифта и представляет собой процент ширины окна.
Отказ от ответственности: Это не совсем то, что вы ищете, но не требуют сценариев. Он регулирует размер текста, но также будет масштабировать на ширину вашей страницы.
Например,
.heading {
font-size: 4vw;
}
сделает ширину одного символа в текущем шрифте 4% ширины окна.
Затем вы можете использовать медиа-запросы, если вы хотите заблокировать размер шрифта до минимального размера на основе ширины окна.
@media only screen and (max-width: 768px) {
font-size: 2rem;
}
Используйте инспектор браузера, чтобы воспроизвести с свойством размера шрифта и настроить значение для того, что имеет смысл для вашего приложения.
Устройство «VW» работает в IE9 +, IOS 8.3+ и Android 4.4+ и все остальные основные браузеры. Я бы не беспокоился о мобильной поддержке слишком много, так как вы можете использовать средства массовой информации, чтобы поставить правильный размер для этих устройств, как описано выше.
http://caniuse.com/#feat=viewport-Units.
https://css-tricks.com/viewport-sized-typography/
Устройства ViewStort являются мощным способом масштабирования многих различных аспектов вашего сайта с небольшим количеством кода.
Я только что сделал сценарий jQuery от подхода Tony B Tony B. Вот 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>Что не так с text-align: justify? Я думаю, что я мог бы неправильности по вашему вопросу.
