Fix #494 : block title overflow behaviour

[Pawankalyan2023]

Motivation

Fixed Block Title Overflow: Updated the visual editor CSS to ensure overflowed text breaks and wraps within the container, maintaining a clean and responsive layout.

Fixes # 494

Type of change:

• Bug fix (non-breaking change which fixes an issue)

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added unit tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[marrouchi]

Hello @Pawankalyan2023 , thank you for your contribution.

How about we use css elipses instead

text-overflow: ellipsis;

[Pawankalyan2023]

This might not be a good choice when we need to showcase the title completely to the user for better understanding.

[marrouchi]

We can show the whole text on hover :

.truncated {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
}
<div class="truncated" title="This is a long text that will be truncated, but showed on hover">
  This is a long text that will be truncated, but shown on hover
</div>

[marrouchi]

Another way of doing it :

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; /* Necessary for positioning the pseudo-element */
}

.ellipsis:hover::after {
    content: attr(data-full-title); /* Fetch the full text from the `data-full-text` attribute */
    position: absolute;
    top: 100%; /* Show below the element */
    left: 0;
    background-color: #fff; /* Optional: Style for visibility */
    color: #000;
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    white-space: nowrap;
}

<div class="ellipsis" data-full-title="This is the full text that will be shown on hover.">
    This is the full title that will...
</div>

[Pawankalyan2023]

Hey @marrouchi I made the changes to the code with ellipses , could you please review this

Screen.Recording.2025-01-06.214723.mp4

[Pawankalyan2023]

@marrouchi is this okay ?