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 set alternate row color for a given attached diagram

    How to make UL Tabs with only HTML CSS

    How to Identify which div in a sequence with the same class was clicked

    How can i make the picture zoom in with css when my picture is 100% width in a bootstrap column?

    How can I get Sitecore Field Renderer to use a css class for an image

    W3.CSS how to get a standard header-[left-right]footer layout?

    CSS how to select nav and li tags but exclude specified class?

    How to add padding to the left and right side of grid in Bootstrap WITHOUT padding between grid boxes using col-sm-3

    How to animate a copy of the div from the current position to the top right

    Font-awesome not properly displaying on Firefox / how to vend via CDN?

    How to make image appear upon hover over text using css?

    How Float divs like twitter?

    How to only make the opacity lower for the background and not the text in it?

    How can I center the page to allow background on sides?

    How to make sure pressed button remain “pressed down”

    HTML table-cell how to set width

    How to adjust the position of specific elements/items/content on a page with CSS

    how to make form input in middle

    How can I get a IE8-compliant css theme for JSTree?

    How do you make a filter for images that have tags?

    How to reuse footer with only HTML/CSS?

    How to get a tag the focus

    How to centre a table in html using css file? [duplicate]

    How to get href Text using CSS selectors

    How to always show up pure HTML5/CSS modal window without clicking a link which activates it?

    How to add CSS for specific pages in RefineryCMS?

    my website not worked in Ipad and how I can fix some small issue? [closed]

    CSS - How make the page scroll over the edge of the window

    how to color the whole star icon when button is clicked

    how to code different type of border in css?