CODEWITHSUNDEEP
textformattingcopyclipboard
Lucas Lamonier
Lucas Lamonier

Reputation: 1

Copied HTML text wraps in a weird way when pasting in text editor (e.g, Word)

This is probably a silly question, but I'm coding my first app and ran into a problem. I am working on an application that formats references. The user fills a form, the app formats the reference using the input data, then it outputs the formatted text. The formatted text will appear alongside a button to copy it to the clipboard.

I implemented a simple example to try it out and managed to copy the text and keep the formatting. However, when pasting it, it wraps in a weird way.

The HTML:

<style>
    .text {
      color: red;
      font-size: 37px;
      font-family: "Arial";
      overflow-wrap: anywhere;
    }
</style>
<body>
  <p class="text">This <b>is <em> some</b> formatted</em> text <em>for</em> testing purposes.</em></p>
  <button class="copy">Copy text</button>
</body>

JS

document.querySelector(".copy").addEventListener("click", function (e) {
  e.preventDefault();
  navigator.clipboard.writeText(document.querySelector(".text"));
});

Screenshot showing the text splitting the word "testing" in half and breaking

Thank you in advance.

Upvotes: 0

Views: 169

Answers (1)

Bob Ray
Bob Ray

Reputation: 1172

anywhere allows text to break inside of words. normal will only break between words, but I suspect that you want continuous text with no breaks except between paragraphs so Word will do the formatting instead of your CSS. That would mean leaving out the overflow-wrap directive and adding overflow: scroll.

Remember that your CSS is not copied when you click the button, so the text editor will not be aware of it.

Upvotes: 0

Related Questions