How to set a max-width only to text nodes not in a tag?


Tags: javascript,jquery,html,css

Problem :

I have mixed well and bad formatted text from a legacy wordpress database. Well formated is inside p tags and bad formatted is outside. So at the end the HTML is like that:

<div>
    <p>Good text</p>
    <blockquote>Good text</blockquote>
    Problematic text <strong>like this</strong> one.
    <p>Good text</p>
</div>

The p text has a max-width set and is centered:

p {
    max-width: 300px;
    margin: 0 auto;
    padding: 10px;
}

The blockquote element or other divs are not width-limited.

As you can see in this fiddle example, my problem is that the non-p text is left-aligned. I don't know if it's possible to center using just CSS. Using javascript my approach was to do this:

jQuery("div").contents().filter(function() { return this.nodeType === 3; }).wrap('<p>');

This is ok in general, buy when you have strong or em tags in the middle it doesn't work (example).

So, is CSS able to do this? If not, how to do in Javascript? Of course, I prefer the CSS option, but JS is a better option than reformat the whole database :)

Clarification: The objective is to limit with max-width only the p-tags and the bad-fomatted text elements (which include text and some tags like strong or em). Other elements must have 100% width, it is, not limited by the 300px max-width (i.e. blockquote must use all the available screen size).



Solution :

Here's a jQuery solution that will wrap the contents that aren't already in <p> or <blockquote>.

Can be easily adapted to include other acceptable tags

var $container = $('div'),
    $contents = $container.contents();

var validTags = ['P', 'BLOCKQUOTE'];
var newP = null;
$contents.each(function (i) {
    if (this.nodeType === 3 || $.inArray(this.tagName, validTags) == -1) {
        if (!newP) { // start creating a new <p>
            newP = $('<p style="color:red">')
        }
        newP.append(this); // append to the new <p>
    } else {
        if (newP) {
            $(this).before(newP); //insert new <p> if there is one
            newP = null; //reset
        }
    }
    /* in case text is after all valid tags, add to end */
    if (i == $contents.length - 1 && newP) {
        $container.append(newP);
    }
});

Note that <div> can't be appended to <p> (invalid child) so this approach would probably need some more refinement for situations like that. It does work on sample provided however

DEMO


    CSS Howto..

    How to completely change the css position of an element on the page to appear in another part of the document flow?

    How to fix a 3x3 block of images with CSS

    CSS: How to toggle switch action on the link?

    CSS: How to fix the width of a vertical menu?

    How to contain text box in parent div

    How to edit ol tags in rich text editor

    CSS/HTML - How do I get text to go behind an image inside a div

    Auto-scaled image not shown correctly with IE 10

    How to call a javascript function with a css button? [closed]

    Showing/hiding elements inside a div block with HTML and CSS

    How can I add a scrollbar to a DIV that contains a table?

    How can I convert an absolute file path to one CSS can use?

    How to edit the correct phone number in my script?

    Before CSS, how one would change margins and paddings?

    How can i add dotted line in front of menu

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    How to change the css of the div that i just created in code

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    Angular 2 Materialize CSS Side-Nav Not Showing

    How to make <'details'> drop down on mouse hover

    How can I change GWT's widget CSS values?

    CSS: How to omit the spacing between an h3 and a p element?

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    How to set div using Z-index and fix css

    How can I position list in
    ?

    CSS: How to make background of an element stretch across the entire page?

    how to use variables when setting CSS properties in Jquery?

    How to force thumbnails to overflow right and not below

    How to return a “text” in css less?

    How to align the wizard to the left and right sides?