Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
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 '10 at 19:01
add comment

1 Answer 1

up vote 10 down vote accepted

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.

share|improve this answer
    
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 '10 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. –  John P Bloch Sep 23 '10 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 –  John P Bloch Dec 6 '10 at 14:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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