网站头部PNG Logo内文本截断问题解决方案咨询

API 探路者

2026-5-25

Fixing Truncated Logo Text Issue

Hey there, let's work through this logo text truncation problem together! Based on the CSS you shared, here are some practical fixes to get that second line of text under "Resolutions" fully visible:

Remove or adjust the fixed height constraint
The root issue here is likely the height: 125px set on both #eut-main-header and .eut-logo. If your PNG logo's actual height is taller than 125px, the overflow: hidden property on .eut-logo will cut off anything that doesn't fit. Try replacing the fixed height with an auto value to let the container adapt to the logo's size:
```
#eut-main-header, .eut-logo { height: auto; }
```
If you need to keep a minimum height for the header, use min-height instead:
```
#eut-main-header { min-height: 125px; }
.eut-logo { height: auto; }
```
Disable overflow hiding
If you absolutely need to keep the 125px height for layout reasons, you can turn off the overflow restriction on the logo container. This will let the full logo show, though you’ll want to check if it overlaps with other page elements:
```
.eut-logo { overflow: visible; }
```
Verify and adjust the logo image dimensions
Double-check your PNG logo's actual pixel height. If it’s significantly taller than 125px, you might want to resize the image itself (using a tool like Photoshop or GIMP) to fit within the container while keeping the text legible. Just make sure not to squish the logo—maintain its aspect ratio!
Use padding instead of fixed height for spacing
If you need to preserve the header's vertical space, swap the fixed height for padding on the logo container. This lets the logo fit naturally while keeping the header area consistent:
```
#eut-main-header { height: 125px; display: flex; align-items: center; }
.eut-logo { height: auto; padding: 10px 0; }
```
The flex properties help center the logo vertically within the header’s fixed height.