Too long on web page

[TommyChen-orz]

Why can't this plug-in be set on the web page to specify the number of lines in a line and then break the line?

[Pitmairen]

It shouldn't extend like that by default, you must have added some custom CSS styling?

Please post you CSS style and I may be able to help.

Copy and paste this content: Popup Menu -> Advanced Settings -> Styling -> Customize:

[TommyChen-orz]

默认情况下不应该扩展成那样，你一定是添加了一些自定义的 CSS 样式？

请发布您的 CSS 样式，我或许能够提供帮助。

Copy and paste this content: Popup Menu -> Advanced Settings -> Styling -> Customize:

Here is css. I've never edited css, I just keep plugging in links.
//
.popup .engine-name, .popup.mainmenu > li:first-child{
display: none;
}
.popup a, .popup li{
display: inline-block; padding: 0.2em;
}
.popup img{
margin: 0; padding: 0;
}
.popup {
width: auto;
padding: 0.1em;
white-space:nowrap;
}
.popup .engine-separator{
width: 1px; height: 20px; margin: 0 3px 3px 3px; padding: 0; vertical-align: middle;
}
/CONFIG_START{"submenu_position":"topright","submenu_corner":"bottomleft"}CONFIG_END/
//

[TommyChen-orz]

默认情况下不应该扩展成那样，你一定是添加了一些自定义的 CSS 样式？

请发布您的 CSS 样式，我或许能够提供帮助。

复制并粘贴以下内容：弹出菜单 -> 高级设置 -> 样式 -> 自定义：

[Pitmairen]

This seems to be the icons only style. I'm not sure why your menu seems to extend further than the number of icons, I have never seen that happen before. It should only be as long as the number of icons.

But anyway if you want it to be a certain width and wrap into multiple lines you can use the following stylesheet.

Just replace everything int in the text area with this:

.popup .engine-name, .popup.mainmenu > li:first-child{
 display: none;
}
.popup a, .popup li{
 display: inline-block; padding: 0.2em;
}
.popup img{
 margin: 0; padding: 0;
}
.popup {
 width: auto;
 padding: 0.1em;
 white-space:normal;
}
.popup .engine-separator{
 width: 1px; height: 20px; margin: 0 3px 3px 3px; padding: 0; vertical-align: middle;
}
/*CONFIG_START{"submenu_position":"topright","submenu_corner":"bottomleft"}CONFIG_END*/
.popup{
 width: 180px;
}

You can adjust the width by adjusting the 180px number at the bottom.

[TommyChen-orz]

这似乎是仅使用图标的样式。我不确定为什么你的菜单看起来比图标的数量还要长，我以前从未见过这种情况。它应该只和图标的数量一样长。

但无论如何，如果你希望它具有特定的宽度并且能够换行显示，你可以使用以下样式表。

只需将文本区域中的所有内容替换为以下内容：

.popup .engine-name, .popup.mainmenu > li:first-child{
display: none;
}
.popup a, .popup li{
display: inline-block; padding: 0.2em;
}
.popup img{
margin: 0; padding: 0;
}
.popup {
width: auto;
padding: 0.1em;
white-space:normal;
}
.popup .engine-separator{
width: 1px; height: 20px; margin: 0 3px 3px 3px; padding: 0; vertical-align: middle;
}
/CONFIG_START{"submenu_position":"topright","submenu_corner":"bottomleft"}CONFIG_END/
.popup{
width: 180px;
}
你可以通过调整底部 180px 的数字来调整宽度。

Sorry, because when I took the screenshot, I hid the link behind it.

This length is normal because there are really so many links behind it.

I mean, why aren't the pop-ups on the page set up to be the same as the ones on the toolbar? Wrap every ten icons.

Just like below⬇️

[Pitmairen]

The single line style is just the default, if you want to it to wrap at about every ten icon you will have to use a custom style. A width of 290px seems to be about right for ten icons.

Copy this into the style text area and save the settings. The popup should now wrap at ten icons:

.popup .engine-name, .popup.mainmenu > li:first-child{
 display: none;
}
.popup a, .popup li{
 display: inline-block; padding: 0.2em;
}
.popup img{
 margin: 0; padding: 0;
}
.popup {
 width: auto;
 padding: 0.1em;
 white-space:normal;
}
.popup .engine-separator{
 width: 1px; height: 20px; margin: 0 3px 3px 3px; padding: 0; vertical-align: middle;
}
/*CONFIG_START{"submenu_position":"topright","submenu_corner":"bottomleft"}CONFIG_END*/
.popup{
 width: 290px;
}

It is of course possible to create a better UI for this, but at the moment you will have to tweak the style manually. I believe the above style should give you approximately what you want.

[TommyChen-orz]

单行样式只是默认设置，如果你希望每大约十个图标就换行，你将需要使用自定义样式。290px 的宽度似乎对十个图标来说比较合适。

将以下内容复制到样式文本区域并保存设置。弹窗现在应该每十个图标换行：

.popup .engine-name, .popup.mainmenu > li:first-child{
display: none;
}
.popup a, .popup li{
display: inline-block; padding: 0.2em;
}
.popup img{
margin: 0; padding: 0;
}
.popup {
width: auto;
padding: 0.1em;
white-space:normal;
}
.popup .engine-separator{
width: 1px; height: 20px; margin: 0 3px 3px 3px; padding: 0; vertical-align: middle;
}
/CONFIG_START{"submenu_position":"topright","submenu_corner":"bottomleft"}CONFIG_END/
.popup{
width: 290px;
}
当然，可以创建更好的 UI，但目前你将需要手动调整样式。我相信上述样式应该能满足你的需求。

Yes, it has been adjusted. What I mean is that this layout should be added to the default function. It would be too troublesome for everyone to set it up. After all, most users are not developers.

[Pitmairen]

Yes, I can add this style to the predefined styles, but it's impossible to add all possible variant that users wants.

I'm planning on creating a better UI that allows customizations like width, color etc. to be made without having to manually edit the CSS, but it's not available yet.