[Cases] truncate long case name by word break (#145003)

## Summary

This PR updates uses `break-word` to display text into the next line for
the long case name on the case management page.

Fixes: https://github.com/elastic/kibana/issues/142647

**Before**

![image](https://user-images.githubusercontent.com/117571355/201154944-f61db2f9-e9d8-4e29-bdbb-240f69e4e2d9.png)


![image](https://user-images.githubusercontent.com/117571355/201155420-44c7cb68-64a5-4c29-8c78-cc0c02e8dc2f.png)

**After**

![image](https://user-images.githubusercontent.com/117571355/201155177-9d52bc3e-7d24-4a8b-a9b0-a490fd8375e4.png)


![image](https://user-images.githubusercontent.com/117571355/201155281-a4f2e27f-a0a0-46be-9ce7-aa11f05d955a.png)


### Checklist
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/cases/public/common/use_cases_toast.tsx

@@ -32,6 +32,7 @@ const Title = styled.span`
   -webkit-line-clamp: ${LINE_CLAMP};
   -webkit-box-orient: vertical;
   overflow: hidden;
+  word-break: break-word;
 `;
 const EuiTextStyled = styled(EuiText)`
   ${({ theme }) => `

x-pack/plugins/cases/public/components/truncated_text/index.tsx

@@ -16,7 +16,7 @@ const Text = styled.span`
   -webkit-line-clamp: ${LINE_CLAMP};
   -webkit-box-orient: vertical;
   overflow: hidden;
-  word-break: normal;
+  word-break: break-word;
 `;
 
 interface Props {