如何使用css在div中显示内容的后半部分？

Question

我有一个div，我可以使用css显示内容的前半部分。 但现在我必须显示内容的后半部分。

让内容

"This is a sample div with some content.And this is for test purpose only."

上半年可能："This is a sample div with some content."

下半场可能："And this is for test purpose only."

我的代码是

<div id="main">
<div id="section1">This is a sample div with some content.And this is for test purpose only.</div>
</div>
#main
{
    width:200px;
    height:100px;

}
#section1
{
    width:50%;
    height:50%;
    background:pink;
    color:blue;
    overflow: hidden;    
}

小提琴： http://jsfiddle.net/bwyd9/

我的required result是包含内容的div："And this is for test purpose only."

注意：内容的前半部分和后半部分可能会有所不同。我仅提供此参考示例。

Answer 1

您可以使用CSS position属性来实现此目的。

<强> HTML

 <div id="main">
   <div id="section1">This is a sample div with some content.And this is for test purpose only.</div>
   <p>&nbsp;</p>
   <div id="section2"><div>This is a sample div with some content.And this is for test purpose only.</div></div>
</div>

<强> CSS

#main
{
width:200px;
height:100px;
}
#section1
{
width:50%;
height:50%;
background:pink;
color:blue;
overflow: hidden;    
}
#section2
{
width:50%;
height:50%;
background:blue;
color:white;
overflow: hidden;  
position:relative;
}
#section2 div{position:absoltue; margin-top:-50%;}

DEMO

Answer 2

其他替代

<强> HTML

<div id="main">
    <div id="section1">
        <div class="p1">This is a sample div with some content.</div>
<div class="p2">
    And this is for test purpose only.</div>
    </div>
</div>

<强> CSS

#main
{
    width:200px;
    height:100px;

}
#section1 .p1
{    
    width:100%;
    height:100%;
    background:pink;
    color:blue;
    overflow: hidden;    
}
#section1 .p2
{  
    width:100%;
    height:100%;
    background:pink;
    color:blue;
    overflow: hidden;    
}

Demo

Answer 3

的JavaScript

var divVar = document.getElementById("section1");
var str1 = divVar.innerHTML;
var str1 = str1.replace(/^(.*?)[.?!]\s/,"");
divVar.innerHTML = str1;

Fidde

这使用RegEx删除第一句话。