Left truncate the URL

packages/edit-post/src/components/sidebar/post-url/style.scss

@@ -13,10 +13,7 @@
 }
 
 .components-button.edit-post-post-url__toggle {
-	display: inline-block;
 	width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
 }
 
 .edit-post-post-url__dialog .editor-post-url {

packages/editor/src/components/post-url/label.js

@@ -2,15 +2,56 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { filterURLForDisplay } from '@wordpress/url';
+import { useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
 export default function PostURLLabel() {
-	return useSelect(
+	const postLink = useSelect(
 		( select ) => select( editorStore ).getCurrentPost().link,
 		[]
 	);
+	return (
+		<LeftTruncatedText>
+			{ filterURLForDisplay( postLink ) }
+		</LeftTruncatedText>
+	);
+}
+
+function LeftTruncatedText( { children: text } ) {
+	const ref = useRef();
+
+	useEffect( () => {
+		const container = ref.current;
+
+		container.innerText = text;
+
+		container.style.display = 'block';
+		container.style.width = '100%';
+		const maxWidth = container.clientWidth;
+
+		container.style.display = null;
+		container.style.width = null;
+
+		const canvas = container.ownerDocument.createElement( 'canvas' );
+		const context = canvas.getContext( '2d' );
+		context.font = window
+			.getComputedStyle( container )
+			.getPropertyValue( 'font' );
+
+		let truncatedText = text;
+		let truncateAmount = 1;
+		while ( context.measureText( truncatedText ).width > maxWidth ) {
+			truncatedText = '…' + text.substring( truncateAmount );
+			truncateAmount++;
+		}
+
+		container.innerText = truncatedText;
+	}, [ text ] );
+
+	return <span ref={ ref }></span>;
 }