ckeditor - CKEditor：按钮的宽度

Question

我需要减小以下按钮（下拉菜单）的宽度：

• “格式化样式”
• “段落格式”
• “字体名称”
• “字体大小”

我该怎么做？

Answer 1

您可以修改底层按钮元素的 CSS。

如果您想针对特定工具，只需使用 firebug 深入 DOM 并查看它们的特定类是什么。

例如，要修改格式和字体下拉菜单的宽度，请使用以下 CSS：

.cke_skin_kama .cke_format .cke_text,
.cke_skin_kama .cke_font .cke_text {
    width: 72px;
}

Answer 2

在 CKEditor 4 中，您可以.cke_combo_text这样调整：

span.cke_combo_text {
  width: 30px;
}

请注意，如果您将其设置为小于默认值（格式样式为 60 像素），则当用户从下拉列表中选择一个选项时，所选选项将不再适合更新的下拉框。

就我而言，我正在寻找清理 UI 以使其在 iPhone 上以垂直方向整齐地排成一行，所以我这样做了：

span.cke_combo_text {
  width: inherit;
}

就我而言，这很棒，因为它会缩小下拉菜单，使其默认适合一行，但如果选择了一个选项，则会自动展开（占用新的一行），向用户显示他们选择的内容。