当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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).

网友答案:

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

网友答案:

To center all the content inside the div:

CSS:

div {
    text-align: center;
}

To center some divs (example 1st and 3rd from 4), selecting them by id:

CSS:

div#sect1, div#sect3{
    text-align: center;
}

HTML:

<div id="sect1>
    <!-- contents -->
</div>
<div id="sect2>
    <!-- contents -->
</div>
<div id="sect3>
    <!-- contents -->
</div>
<div id="sect4>
    <!-- contents -->
</div>
网友答案:

Try adding the same styles to the body and the strong tags:

strong {
font-weight: normal; margin: 0 auto;
padding: 10px;}
body {

max-width: 300px;
margin: 0 auto;
padding: 10px;
}
网友答案:

Why don't you apply the max-width on the container element and remove it from other descendent elements.

div.container {
    max-width: 300px;
    margin: 0 auto;
}

check this fiddle.

EDIT: you can use the negative margins if you know your main container width. e.g. use -150px margin if your content area is 300px and it's container is 600px and you want bloquote to be 600px wide.

Fiddle

网友答案:
<style>
body{
    text-align:center;
}
div:before{
    text-align:center;
    max-width:300px;
    margin:0 auto;
}

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

blockquote{
    font-size: 2em;
    width:100%;
    margin:0 auto;
}

</style>
分享给朋友:
您可能感兴趣的文章:
随机阅读: