diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index 87a953fd6e..dc16a2b7e9 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -1,12 +1,13 @@
-import { Space, Tabs, Typography } from 'antd';
+import { Space, Tabs, Tooltip, Typography } from 'antd';
 import { StyledSpace } from 'components/Styled';
 import useThemeMode from 'hooks/useThemeMode';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
 
 import ErrorTag from './ErrorTag';
 import {
 	CardContainer,
+	// CustomSpace,
 	CustomSubText,
 	CustomSubTitle,
 	CustomText,
@@ -19,11 +20,14 @@ const { TabPane } = Tabs;
 function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 	const { tree } = props;
 	const { isDarkMode } = useThemeMode();
+
+	const OverLayComponent = useMemo(() => tree?.name, [tree?.name]);
+
 	if (!tree) {
 		return <div />;
 	}
 
-	const { name, tags, serviceName } = tree;
+	const { tags, serviceName } = tree;
 
 	return (
 		<CardContainer>
@@ -37,10 +41,12 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 					<CustomTitle>Service</CustomTitle>
 					<CustomText>{serviceName}</CustomText>
 				</Space>
-				<Space direction="vertical" size={2}>
-					<CustomTitle>Operation</CustomTitle>
-					<CustomText>{name}</CustomText>
-				</Space>
+				{/* <CustomSpace direction="vertical" size={2}> */}
+				<CustomTitle>Operation</CustomTitle>
+				<Tooltip overlay={OverLayComponent}>
+					<CustomText ellipsis>{tree.name}</CustomText>
+				</Tooltip>
+				{/* </CustomSpace> */}
 			</StyledSpace>
 			<Tabs defaultActiveKey="1">
 				<TabPane tab="Tags" key="1">
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
index dc5bdc03e9..211b07b190 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
@@ -1,7 +1,7 @@
-import { Typography } from 'antd';
+import { Space, Typography } from 'antd';
 import styled, { css } from 'styled-components';
 
-const { Text, Title, Paragraph } = Typography;
+const { Title, Paragraph } = Typography;
 
 export const CustomTitle = styled(Title)`
 	&&& {
@@ -9,7 +9,7 @@ export const CustomTitle = styled(Title)`
 	}
 `;
 
-export const CustomText = styled(Text)`
+export const CustomText = styled(Paragraph)`
 	&&& {
 		color: #2d9cdb;
 	}
@@ -44,6 +44,17 @@ export const CardContainer = styled.div`
 	width: 100%;
 	flex: 1;
 	overflow-y: auto;
+	overflow-x: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+`;
+
+export const CustomSpace = styled(Space)`
+	&&& {
+		.ant-space-item {
+			width: 100%;
+		}
+	}
 `;
 
 const removeMargin = css`