Apply custom style to single word in WordPress

I’m setting up a WordPress site for a client. They need to be able to hide individual words through the WYSIWYG editor, which will be revealed upon a click.

I’ve set up a new custom style format in functions.php, to apply a span class around the highlighted word.

However, when you highlight a word in the WYSIWYG editor and apply the format, the span wraps around the whole html within the nearest block: the whole paragraph or list item, for example.

How can I get a style format to apply to an individual word, as the Italics or Bold buttons do?

Solved it…

In my functions.php I should have put:

    array(  
        'title' => 'Hidden Element',  
        'inline' => 'span',  
        'classes' => 'hiddenElement',
        'wrapper' => false,
    ),  

not

    array(  
        'title' => 'Hidden Element',  
        'block' => 'span',  
        'classes' => 'hiddenElement',
        'wrapper' => false,
    ),  

as here: http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/