Add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

.tab-label-container[textoverflow]:not([pinned]) {
  mask-image: unset !important;
}

• create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
• use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
• paste the code in the userChrome.css file in the editor window
• make sure that the userChrome.css file starts with the default @namespace line
• make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
  otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

• Help -> Troubleshooting Information -> Profile Directory:
  Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder
• http://kb.mozillazine.org/Profile_folder_-_Firefox

Thank you mate ! I did exactly as you wrote. No effect on firefox 53 and later. Again , I would like the former tab text that end with "..." when overflow! Firefox 52 is ok , but starting from version 53 it is fade out all the way. I attached a picture. Thanks again.