Question

所以我有一个多语言网站（目前只有法语和英语），有些地方有多行内容（标题），有点像这样：

＆＃13;

this.apollo.mutate({
        mutation: mutationCreateNewAccount,
        variables: {
            accountNumber: this.accountNumber,
            accountType: this.accountType,
            routingNumber: this.routingNumber,
            nameOfAcountHolder: this.name
        },
        refetchQueries: [{
            query: queryAccounts,
            variables: { accountNumber: this.accountNumber }
        }]}).subscribe(({ data }) => console.log(data),

＆＃13;

.banner-heading{
    font-size: 37.2px;
}

.banner-second-heading{
    font-size: 46px;
}

.banner-third-heading{
    font-size: 78px;
}

＆＃13;

设计师希望在没有合理性的情况下完成它，因为它会使他们选择的字体变形。

我的问题是我目前对英语也做同样的事情（使用不同的值来保持文本在行的开头和结尾处很好地对齐），但是维持当前状态已经很烦人了，我们应该决定要添加其他语言，几乎不可能有一种css PER语言，特别是每行和每种语言有<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="flex flexCenter flexColumn col-xs-12 col-md-6 title-fr"> <h1 class="banner-heading">Une solution digitale</h1> <h1 class="banner-second-heading">pour le bien-être</h1> <h1 class="banner-third-heading">au travail</h1> </div>不同。

所以我的问题是：如何在不使用justify属性的情况下以不同语言实现相同的结果，因为它会使所选字体变形，并且不必在不同的地方使用font-size属性语言。

非常感谢你的帮助，对不起，如果这个问题已经得到解答，我搜查了一下，但没有找到答案。

Answer 1

我认为我坚持你的问题，你需要改变字体/文字的大小以适应容器。

这是一个使用svg和一点JavaScript来实现的解决方案。

首先我们必须使用svg写出文本

const firestoreStub = sinon.stub();
Object.defineProperty(admin, 'firestore', {
  get: () => {
    return {
      collection: (path) => Promise.resolve({mocka: 'user'})
    }
  }
});

然后我们必须测量文本并更改为视口以适合文本。

<svg  width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
  <text class="scalableText" x="0" y="15">Une solution digitale</text>  
</svg>

＆＃13;

var textElements = document.getElementsByClassName('scalableText');
for(var i = 0;i < textElements.length; i++)
{
    var textLength = textElements[i].getComputedTextLength();
    textElements[i].parentElement.setAttribute("viewBox", "0 0 " + textLength + " 20"); 
}

＆＃13;

var textElements = document.getElementsByClassName('scalableText');
for(var i = 0;i < textElements.length; i++) {
  var textLength = textElements[i].getComputedTextLength();
  textElements[i].parentElement.setAttribute("viewBox", "0 0 " + textLength + " 20"); 
}

＆＃13;

Example on jsbin

Answer 2

下面使用jQuery计算最大行的宽度，然后使用该宽度创建比率并计算新的字体大小

var $wrapper = $('.wrapper');

$wrapper.each(function() {
  var $spans = $(this).find('.equalise'),
    max = 0,
    fontsize = 0;

  $spans.each(function() {
    var $this = $(this),
      width = $this.outerWidth();

    if (max < width) {
      $spans.removeClass('max');
      $this.addClass('max');
      max = width;
      fontsize = parseInt($this.css('font-size'));
    }
  });

  $spans.not('.max').each(function() {
    var $this = $(this),
      ratio = max / $this.outerWidth();
    $this.css('font-size', fontsize * ratio)
  });
});

.equalise {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="equalise">line 1 text</span><br>
  <span class="equalise">big font</span><br>
  <span class="equalise">a lot more text for to show how this works</span><br>
</div>
<br>
<div class="wrapper">
  <span class="equalise">another example</span><br>
  <span class="equalise">a line with some text</span><br>
  <span class="equalise">short stuff</span><br>
</div>

在没有text-align justify属性的情况下证明多语言文本

2 个答案: