div缩小时,里面的英文不会溢出功能的实现

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dongdong9223/article/details/53405632

转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53405632
本文出自【我是干勾鱼的博客

有时候我们经常需要将英文文字放在div中,当时当div缩小时,如果英文文字很多会溢出div。注意这里我们为什么会说“英文”呢?因为如果是中文的话会自动的被限制在div中。这里举各例子。代码如下:

<!DOCTYPE html>
<html>
<head>
<style> 
.aa
{
    width:250px;
    height:100px;
    background:blue;
    word-break:break-all;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div.aa:hover
{
    transition:width 2s;
    width:100px;
}

.bb {
    border: solid yellow;
    background: red;
    z-index:9988;
}
</style>
</head>
<body>

<div class="aa">
    <div class="bb">aaabbbcccdddeeefffggg</div>
    <div class="bb">胡适的杂文很好看</div>
    <div class="bb">或者,你可以看看林语堂的小说</div>
</div>

</body>
</html>

例如,原页面如图:

这里写图片描述

鼠标划过时,如图所示:

这里写图片描述

能够看出,英文由于过多溢出在div外面了(当然,中文默认就没有溢出)。

如何让因为也不溢出div呢,这里需要使用css“word-break”属性,进行设置:

word-break:break-all;

w3school上说“word-break”的功能是“在恰当的断字点进行换行”,其实就是不让内容溢出。这个css属性设置了之后,内部的内容如果在一行中显示不出来就可以换行了。

加入了“word-break”属性之后的代码如下:

<!DOCTYPE html>
<html>
<head>
<style> 
.aa
{
    width:250px;
    height:100px;
    background:blue;
    word-break:break-all;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div.aa:hover
{
    transition:width 2s;
    width:100px;
}

.bb {
    border: solid yellow;
    background: red;
    z-index:9988;
}
</style>
</head>
<body>

<div class="aa">
    <div class="bb">aaabbbcccdddeeefffggg</div>
    <div class="bb">胡适的杂文很好看</div>
    <div class="bb">或者,你可以看看林语堂的小说</div>
</div>

</body>
</html>

这时鼠标划过时英文就不会溢出了,如图所示:

这里写图片描述

效果还是很明显的。这种功能一般在那种可以将div中的文字滑动出来,又可以隐藏回去的情况下会用到。

展开阅读全文

MFC 位图缩小,原来的位图擦不掉.

05-06

各位好,我在做一个位图的放大缩小时,当滚动条拉到右下角,放小图片的时候,原来的图片没擦掉,rn pDoc->UpdateAllViews(NULL);rn Invalidate ( TRUE );rnInvalidateRect(&client);这三个函数都试 过了,还是没有效果,但我最小化窗口,然后再还原窗口就正常了,请高手帮忙看下什么原因,怎么解决?[img=https://img-bbs.csdn.net/upload/201405/06/1399338174_957054.jpg][/img]rnrn最小化,窗口,再还原窗口,或是点下滚动条就正常了,如图[img=https://img-bbs.csdn.net/upload/201405/06/1399338241_281583.jpg][/img]rnrnrnondraw代码rn[code=c]void CCDPatternView::OnDraw(CDC* pDC)rnrn CCDPatternDoc* pDoc = GetDocument();rn ASSERT_VALID(pDoc);rn if (!pDoc)rn return;rnrn // TODO: 在此处为本机数据添加绘制代码;rn //自适应窗口,大于窗口调用滚动条;rn CSize sizeTotal;rn sizeTotal.cx =m_change.Width();rn sizeTotal.cy =m_change.Height() ;rn SetScrollSizes(MM_TEXT, sizeTotal);rn m_ImageSize=sizeTotal;rn rn //m_ImgHScrollPos;rn //m_ImgVScrollPos;rn //解决图像闪烁问题; rn CRect client; rn CRect rect_2;rn CClientDC dc_1(this);rn OnPrepareDC(&dc_1);rn GetClientRect(&rect_2);rn dc_1.DPtoLP(&rect_2);rnrn GetClientRect(&client);rn //dc_1.DPtoLP(&client);rnrn long offsetx=client.Width()/2-(m_change.right-m_change.left)/2;//中心rn long offsety=client.Height()/2-(m_change.bottom-m_change.top)/2;rn rn CDC MemDC;rn CBitmap MemBitmap;rn MemDC.CreateCompatibleDC(NULL);rn long x,y;rn rn x=client.Width();rn y=client.Height();rnrn int a=((int)client.right/m_rate+1)*m_rate;rn int b=((int)client.bottom/m_rate+1)*m_rate;rn rn rn MemBitmap.CreateCompatibleBitmap(pDC,a,b);rn rn rnrn CBitmap *pOldBit=MemDC.SelectObject(&MemBitmap);rn MemDC.FillSolidRect(0,0,a,b,RGB(155,205,255));rn rn rnrnrn //CRect partDIB;rn //partDIB=m_rcDIB;rnrn int PartrcDIBx=(int)client.right/m_rate+1;rn int PartrcDIBy=(int)client.bottom/m_rate+1;rn CPoint pt;rn rn rn CSize sz(PartrcDIBx,PartrcDIBy);rn CRect partDIB(pt,sz);//用于指定原图里要放大的区域;rnrnrn int PartsrcDIBx=PartrcDIBx*(m_rate);rn int PartsrcDIBy=PartrcDIBy*(m_rate);rn CRect clientPro(0,0,PartsrcDIBx,PartsrcDIBy);//用于变成客户区大小(为了精确);rn PaintDIB(MemDC.GetSafeHdc(), rn 0,rn 0,rn clientPro,rn // 0,0,clientrn pDoc->m_hDIB, rn partDIB, rn NULL, rn SRCCOPY);rnrn rn if(m_rate>=4) //大于4倍画网格rn rn if (offsetx<0)rn rn DrawGrid(&MemDC,client.right,m_change.bottom);rn rn else if (offsety<0)rn rn DrawGrid(&MemDC,m_change.right,client.bottom);rn rn else if(offsetx>0&&offsety>0)rn rn DrawGrid(&MemDC,m_change.right,m_change.bottom);rn rn elsern rn DrawGrid(&MemDC,client.right,client.bottom);rn rn rnrn rn if (offsety>=0)rn rn m_ImgVScrollPos=0;rn m_ImgHScrollPos=rect_2.left;rn rn else if(offsetx>=0)rn rn m_ImgHScrollPos=0;rn m_ImgVScrollPos=rect_2.top;//这个值;rn rn else if (offsety>0&&offsety>0)rn rn m_ImgHScrollPos=0;rn m_ImgVScrollPos=0;rn rn rn pDC->BitBlt(m_ImgHScrollPos,m_ImgVScrollPos,x,y,&MemDC,0,0,SRCCOPY);rn MemBitmap.DeleteObject();rn MemDC.DeleteDC();rnrn rn rn rn UpdateRulersInfo(RW_VSCROLL, GetScrollPosition());rn UpdateRulersInfo(RW_HSCROLL, GetScrollPosition());rn[/code] 论坛

视窗缩小table在IE6会往下掉

02-17

视窗左右寬度缩小时table(blue區塊)在IE6会往下掉rn将white-space: nowrap;拿掉也是会掉rnfirefox chrome ie7~10都无问题rn只有ie6会这样rn我希望让版面维持rnheader在上rnleft在左 right在右rnfooter在下rn请问这有办法解决吗rnrncss代碼rn--------------------------------------rn@charst "utf-8";rnrn#header rn background:redrnrnrn#left rn background:limernrnrnrn#right rn background:blue;rn position: relative;rn margin: 0 25px 0 146px;rn zoom: 1; rnrnrnrnrn.menu rn z-index:3;rn font-size: 1em; rn overflow: hidden;rn float: left;rn width: 125px;rn display: inline; rnrnrntable td,th, tr rnwhite-space: nowrap;rnrnrn#footer rn background:yellowrnrnrnrnrn----------------------------------------rnrnhtml代碼rn----------------------------------------rnrnrnrn rn testrn rnrnrn rn rn company | outrn rnrnrnrn rn rn aaaaaaaaaaaarn ereeeeeeern caaaaaaaaaaarn aaasssssssrn rn rnrnrnrnrn rn rn rn rn aaaaaaaaaarn rn rn rn rn bbbbbbbbbbbbbbrn rn rn rn rn cccccccccccccccrn rn rn rn rn ddddddddddddddrn rn rnrnrn rn rn rn rn AAAAA rn BBBBB rn CCCCC rn DDDDD rn EEEEE rn FFFFF rn GGGGG rn HHHHH rn IIIII rn rn rn 6n5nsasdsdn8sasdsdrn nrn nrn n%rn n 元rn nrn n 元rn nrn nrn rn rn 6n5nsasdsdn7sasdsdrn 6rn 6rn 5nn.nn%rn 58n 元rn 6rn 2n.nn 元rn 5.nnnnrn sdfsdafrn rn rn 6n5nsasdsdn6sasdsdrn 6x876rn 648rn 66.58%rn 658x84n 元rn 7x428rn 44.56 元rn 6.6n75rn asdasdrn rn rn 6n5nsasdsdn5sasdsdrn 4xn66rn 654rn 6n.46%rn 4n6x6nn 元rn 5nx46nrn 68.82 元rn 4.4654rn sadasdrn rn rn talorn 5x2nnrn 5x654rn 65.65%rn 565x66n 元rn 57x26nrn 45x65 元rn 4.n445rn fdsfasdrn rn rn rnrnrnrnrnrn rn SIODHIOSAHDOAJDOrnrnrnrnrnrn------------------------------------------------------ 论坛

没有更多推荐了,返回首页