Sometimes elements may be styled with a fixed width. The problem with this is if you change the text to be displayed within the styled element, for example changing the language you wish to view the website in, then some of the text may not be displayed as expected.

Identifying links styled with a fixed width where text may not be displayed as expected

Using the DevTools console you can execute some JavaScript which will increase a links text length in order to identify links where their text length exceeds the fixed width which is set for it.

To execute the JavaScript snippet

1. Open DevTools within Chrome :
   • Windows: CTRL+SHIFT+J OR F12
   • Mac: Command+Option+J
   • You can also open through the wrench menu (Tools > JavaScript Console)
2. Paste the following snippet into the console tab and press Enter on your keyboard to execute the snippet on the web page you are currently viewing

The above snippet find’s all a (links) within the currently loaded document (web page). For each link which is found, we then loop through each link on the loaded document and increase it’s text length by appending a random string to the end of it.

Find this useful?

Why not check out the UsefulJsSnippetExtension.