question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Inline text adornments break word wrapping

See original GitHub issue
  • VSCode Version: 1.15.1
  • OS Version: Windows 10 x64

Steps to Reproduce:

  1. Settings:
    "editor.wordWrap": "on",
    "css.colorDecorators.enable": true
  1. Code example:
   .form-control:focus { border-color: #141d36; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(165,128,57,0.6); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(165,128,57,0.6); }

With colorDecorators disabled word wrapping works fine. After enabling it wordWrap completely ignores the width of added decorators and wrapes the code as they are not there what makes parts of the code to be pushed out of viewport.

I think it would be better to just underline the colors accordingly instead adding new elements next to it. Also it would be great to add some margin between wrapped code and minimap (or whatever is on the right).

Reproduces without extensions: Yes

Edit: Added a screenshot to demonstrate the issue: screen shot 2018-05-15 at 1 09 33 am

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:141
  • Comments:28 (8 by maintainers)

github_iconTop GitHub Comments

57reactions
trevyncommented, May 8, 2020

Ok, this is starting to drive me batty. I use rust-analyzer, which uses inline decorations to show inferred type annotations, and I tend to use narrow, word-wrapped editors. This combination, plus the bug in this issue, don’t combine well.

(The dark grey type annotations in the screenshots are inferred and displayed with inline decorations, i.e. not part of the text in the actual file, and word wrap is on.)

@alexdima Do you have a sense of a reasonable approach to fix this? I’d like to start looking at the code soon, and a quick overview of what’s going on from someone familiar would help greatly.

Screen Shot 2020-05-08 at 11 14 59 AM Screen Shot 2020-05-08 at 11 15 22 AM

27reactions
trevyncommented, Aug 22, 2020

@alexdima From the user perspective, this issue is a bug — soft wrapping is broken. I think this issue should be categorized as a bug, not a feature request.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Wrapping and breaking text - CSS: Cascading Style Sheets
Wrapping and breaking text. This guide explains the various ways in which overflowing text can be managed in CSS.
Read more >
Deep Dive into Text Wrapping and Word Breaking
Putting overflow-wrap: break-word on an element will allow text to break mid-word if needed. It'll first try to keep a word unbroken by...
Read more >
16 Text
This property specifies the indentation of the first line of text in a ... the decorations are propagated to an anonymous inline element...
Read more >
Xamarin.Forms Label - Microsoft Learn
Truncation and wrapping ; HeadTruncation – truncates the head of the text, showing the end. ; CharacterWrap – wraps text onto a new...
Read more >
Quick reStructuredText - Docutils
Inline markup allows words and phrases within text to have character styles (like italics and boldface) and functionality (like hyperlinks).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found