Блог

Я пытаюсь создать границу для каждого слова в предложении, включая пробелы в фиксированном фрейме. Так, например, при заданном предложении, таком как «Мне нравится изучать код», мне нужны 4 строки, поскольку в предложении есть 4 слова и границы для каждого слова и пробела, как на изображении ниже. Серое поле для слова и оранжевое поле для пробелов. Итак, верхняя строка ссылается на «I», поэтому 1 серая рамка и оранжевая рамка, затем «like» равняется 4 серым рамкам, за которыми следует оранжевая рамка и так далее. Проблема, с которой я сталкиваюсь, заключается в том, что когда я использую sentence.split(«»).map, я получу более 10 строк, поскольку каждый символ сопоставлен. Когда я использую sentence.split(» «).map, я получаю 4 строки, что хорошо, но я смог создать границу только для первого символа каждого слова. Я предполагаю, что мне нужно найти способ разделить предложение на что-то вроде этого [«I», «like», «learning», «code»], где я включаю пробел вместе с word? Любые рекомендации будут оценены. Вот ссылка на code sandbox: https://codesandbox.io/s/modern-sun-3u7b3?file=/src/App.js

 import React from "react";
import "./styles.css";

export default function App() {
  let sentence = "I like learning code";

  return (
    <div>
      {sentence.split(" ").map((letter, i) => (
        <p className="letterBorder" key={i}>
          {letter}
        </p>
      ))}
    </div>
  );
}
 

 .App {
  font-family: sans-serif;
  text-align: center;
}

.letterBorder {
  border-bottom: 3px solid #2980b9;
  font-size: 30px;
  margin: 0 3px;
  height: 50px;
  width: 20px;
}
 

Вы можете просто разделить пробелы, чтобы получить каждую строку. В каждой строке вам нужно будет разделить каждую букву и добавить пробел в конце. Что-то вроде этого:

 function App() {
  let sentence = "I like learning code";
  const words = sentence.split(" ");

  return (
    <div>
      {
        words.map((word, i) => (
        <div className="row" key={i}>
          {
            [...word].map(letter=> (
              <p className="letterBorder">
                {letter}
              </p>
            ))
          }
          {
            i === words.length-1 ? null : <p className="whitespaceBorder"></p>
          }
        </div>
      ))}
    </div>
  );
}
 

Затем вы можете стилизовать все с помощью css.

Вы можете увидеть рабочий образец здесь