TinyMCE编辑器工具栏按钮文本过长，如何实现自动换行？

阿华AIGC实验室

2026-5-27

解决TinyMCE工具栏按钮文本多行显示的问题

针对你遇到的动态生成工具栏按钮文本过长的问题，这里有两个实用的解决方案，能帮你优化按钮的显示效果：

方案一：通过CSS全局设置（通用所有按钮）

这个方法无需修改TinyMCE的配置代码，直接通过CSS强制按钮文本换行，适合所有内置或动态生成的按钮：

/* 自定义TinyMCE工具栏按钮样式，实现多行文本 */
.tox-tbtn {
  white-space: normal !important; /* 取消文本不换行的默认设置 */
  max-width: 80px; /* 根据你的需求调整按钮最大宽度，触发换行 */
  width: auto;
  text-align: center; /* 让文本居中显示，更美观 */
  padding: 4px 6px; /* 可选：调整内边距，优化按钮内文本空间 */
}

把这段CSS添加到你的页面样式中（比如<style>标签或者自定义样式文件），就能让所有工具栏按钮的长文本自动拆分成多行。注意!important是为了覆盖TinyMCE的默认样式优先级，如果你的选择器足够具体（比如加上父容器类名），也可以去掉它。

方案二：自定义按钮时直接插入换行（针对动态生成的自定义按钮）

如果这些动态按钮是你通过TinyMCE的API创建的，可以在按钮的文本中直接插入<br>标签来手动控制换行位置：

tinymce.init({
  selector: '#your-textarea',
  toolbar: 'dynamicBtn1 dynamicBtn2', // 动态按钮的标识
  setup: function(editor) {
    // 示例：创建一个带多行文本的动态按钮
    editor.ui.registry.addButton('dynamicBtn1', {
      text: '插入图片<br>到文档', // 手动添加换行符
      icon: 'image', // 可选：搭配图标更直观
      onAction: function() {
        // 按钮点击逻辑
        editor.execCommand('mceInsertContent', false, '<img src="your-image-url">');
      }
    });
  }
});

这种方法的优势是可以精准控制换行的位置，适合需要自定义按钮文本排版的场景。