8

Why is the visual editor in Wordpress is limiting the width by wrapping the content?

I found this behavior in the editor at least annoying, it does prevent me from using my screen real estate.

1
  • Can you explain what you'd want the editor to do versus what it's actually doing? Wrapping text in an edit box is the default behavior of any text editor ... so I'm not quite sure what problem you're having ...
    – EAMann
    Sep 21, 2010 at 19:01

1 Answer 1

15

Hazarding a guess at what you really mean, I suppose you mean something like this is happening:

Word Wrapping

If that is what you're referring to, that's because your theme has an editor-style.css stylesheet that's getting used in the visual editor. Somewhere inside that stylesheet is something like this:

html .mceContentBody {
    max-width:640px;
}

Removing that or modifying the max-width value will let you customize that. The other option is to remove the stylesheet altogether. To do that, find this line of code in your theme (probably in functions.php):

add_editor_style();

and remove it.

If this was not at all your problem, I apologize and would love some clarification.

EDIT

Since it looks like WordPress loads your stylesheet before it loads the template stylesheet, there are two ways to override styles. First (and easiest): make your style important:

html .mceContentBody {
  max-width: none !important;
}

To stop the editor from loading the parent styles at all, you could add this to your theme's functions.php file:

function get_rid_of_editor_styles(){
  global $editor_styles;
  if(is_array($editor_styles))
    foreach($editor_styles as $e)
      $e = 'editor-style.css' == $e ? '' : $e;
}
add_action('init','get_rid_of_editor_styles');

function add_my_own_editor_styles(){
  add_editor_style( 'custom-editor-style.css' );
}
add_action('after_setup_theme','add_my_own_editor_styles');

Then in your child theme, use custom-editor-style.css as your child theme's editor stylesheet instead of editor-style.css.

Please note, this last part of the answer would not be the best solution for everybody. I'm only offering it because I know that you are using a child theme using twentyten as the template.

3
  • Thanks, you guessed right. Still something is still incomplete: where to put the override .. max-width: none;. I tried to put it inside my child theme but it is not loaded when I'm in admin - not sure why (parent is twentyten). The idea is that I want to put it in a place where it will not be overriden by a wordpress upgrade or parent theme upgrade.
    – sorin
    Sep 23, 2010 at 12:05
  • Ok, here's what it looks like WordPress is doing: It adds your theme's stylesheet, THEN (if it's still being called) the template's editor styles. I'll edit the answer above with some possible solutions. Sep 23, 2010 at 13:33
  • 3
    Little update on this: WordPress 3.1 will load the child theme's stylesheet after the parent's. This will allow your styles to override the parent styles without needing to remove the parent editor styles altogether. More info here: core.trac.wordpress.org/ticket/14430 Dec 6, 2010 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.