Question

谁可以帮助在每个新行上更改文本方向。 以下是示例：

text left-to-right
text right-to-left
text left-to-right
text right-to-left... etc.

在每个word-wrap: break-word我需要更改文字方向。请帮忙！它可能是jquery或javascript代码。

下面的例子，但它是用css和段落制作的。我需要在没有段落的情况下改变文本方向，或者在word-wrap上的一个段落中。

不幸的是，我不知道如何制作这个，真的......

.ltr {
  direction: ltr;
  }
.rtl {
  direction: rtl;
  }

<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>

Answer 1

您可以通过正则表达式选择每行文本，并使用String.prototype.replace()在p标记中进行设置。现在，您可以通过更改相关p的CSS来更改每行的方向。

$("div").html(function(i, text){
    return text.replace(/(.+\n?)/g, "<p>$1</p>");
});

$("div").html(function(i, text){
  return text.replace(/(.+\n?)/g, "<p>$1</p>");
});

div > p:nth-child(odd){
   direction: ltr;
}
div > p:nth-child(even){
   direction: rtl;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
text left-to-right
text right-to-left
text left-to-right
text right-to-left... etc.
</div>

Answer 2

俄罗斯stackoverflow上的一个人（https://ru.stackoverflow.com/users/224871/surfin-bird）写了代码

＆＃13;

function wrap(element){
  var text = element.getAttribute('data-original');
  if (!text){
    text = element.textContent.trim();
    element.setAttribute('data-original', text);
  }
  
  var words = text.split(/\s+/);
  var result = '', line = '', reverseLine = false;
  
  element.innerHTML = 'a';
  var height = element.offsetHeight;
  
  for (var i = 0; i < words.length; i++){
    var candidate = line + ' ' + words[i];    
    element.innerHTML = result + candidate;
    if (element.offsetHeight > height){
      height = element.offsetHeight;
      result += '<div>' + line + '</div>';
      line = words[i];
    } else {
      line = candidate;
    }
  }
  
  if (line) result += '<div>' + line + '</div>';
  element.innerHTML = result;
}

function wrapAll(){
  console.time('wrapAll()');
  [].forEach.call(document.querySelectorAll('.weird-word-wrapping'), wrap);
  console.timeEnd('wrapAll()');
}

wrapAll();
window.onresize = wrapAll;

＆＃13;

.weird-word-wrapping div:nth-child(2n) {
  direction: rtl;
  unicode-bidi: bidi-override;
  white-space: nowrap;
}

＆＃13;

<div class="weird-word-wrapping">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</div>

＆＃13;

如何使用javascript / jquery更改每行文本的文本方向？

2 个答案: