Question

我想要我的博客文本框，我可以发布Html - CSS代码，用户可以复制它们。示例= http://3.bp.blogspot.com/-OhvKmLgY-O4/UnaA9HGfcVI/AAAAAAAAA3Y/b4VrxT8BK8U/s1600/Long+code.png

我的图片链接= http://1.bp.blogspot.com/-i3AX6FFu9N8/UnYbGgMgYhI/AAAAAAAAA2k/SFv0kK7x6YI/s1600/Coding+Place+For+Blogger.png

我希望如果代码很小。它应该自动变成这样= http://1.bp.blogspot.com/-RYmQ9CRKiVw/UnaAv0niNuI/AAAAAAAAA3Q/2Fi6bRvkUUg/s1600/small+code.png

并且如果代码很长，它应该自动像这样= http://3.bp.blogspot.com/-OhvKmLgY-O4/UnaA9HGfcVI/AAAAAAAAA3Y/b4VrxT8BK8U/s1600/Long+code.png

当我尝试制作并将代码粘贴到其中时，它变得很糟糕，你可以看到= http://1.bp.blogspot.com/-CP8_CBwHwMk/UnZ33pJdhEI/AAAAAAAAA2w/8e8mZUsAwRo/s1600/solution+please.png

CSS代码：

#tbox1 {
    background:url(http://1.bp.blogspot.com/-i3AX6FFu9N8/UnYbGgMgYhI/AAAAAAAAA2k/SFv0kK7x6YI/s1600/Coding+Place+For+Blogger.png) no-repeat;
    width:500px;
    height:380px;
    margin:10px;
    padding:20px 40px;
    overflow:auto;
    word-wrap:nowrap;
    /*font styles*/
    font-family:'Open Sans', sans-serif;
    font-size:16px;
    /*1em*/
    color:#000000;
    line-height:20px;
}

HTML CODE

<div id="tbox1">Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code v</div>

你可以在JsFiddle上看到实际发生在我身上的事情

http://jsfiddle.net/e5nHr/

Answer 1

在css中添加此代码：

background-repeat: no-repeat;

我还注意到你提供的图像在左边框上有一些设计，所以你还需要提供一些填充

padding-left: 60px;
padding-top: 10px;

Answer 2

http://jsfiddle.net/H7569/

 #tbox1 {
     background:url(http://1.bp.blogspot.com/-i3AX6FFu9N8/UnYbGgMgYhI/AAAAAAAAA2k/SFv0kK7x6YI/s1600/Coding+Place+For+Blogger.png) no-repeat center center;
     width:500px;
     height:333px;
     margin:10px;
     /*font styles*/
     font-family:'Open Sans', sans-serif;
     font-size:16px;
     /*1em*/
     color:#000000;
     line-height:20px;
 }
 .content {
     width: 410px;
     height: 290px;
     overflow: auto;
     position: relative;
     top: 20px;
     left: 60px;
     bottom: 20px;
     right: 20px;
 }

Blogger的文本框

2 个答案: