5

我正在尝试制作一个块引用样式,其中开始和结束引号比文本大,但仍然适合它的行,就像这样例子

这是我的代码http://jsfiddle.net/EnL3R/2/

<div id="conteudo">
  <ul class="parcerias">
    <li><a href="#">Title- <i>Author</i></a></li>
     <li class="descricao">
        <blockquote>
            
            <p><span>“&lt;/span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla nisl quis enim scelerisque ac consectetur tortor molestie. Morbi mollis augue et risus imperdiet dictum. Suspendisse sed sapien nec erat pretium consectetur et et metus. Maecenas tincidunt turpis placerat nisi vulputate at volutpat ante vulputate. Duis accumsan suscipit posuere. Nunc suscipit facilisis dapibus. Nulla scelerisque felis sed urna bibendum facilisis. Vivamus fermentum egestas lorem ac accumsan. Aenean vulputate massa pharetra sapien tincidunt placerat. Aenean molestie luctus velit. Ut cursus ante ante, quis luctus diam. Ut varius, lorem non vestibulum ornare, sem nisi gravida leo, a molestie mauris mauris non orci. Proin sit amet leo nunc.
            </p> 
            <p> 
            Nunc mollis, nunc eu vestibulum feugiat, lacus dui hendrerit metus, a placerat nulla tortor eget lacus. Etiam semper ligula turpis. Vivamus eget luctus nulla. Aliquam non nibh turpis. Aliquam aliquet lorem id massa cursus auctor egestas est tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at purus vitae tortor venenatis vulputate eget eu metus. Donec accumsan metus scelerisque orci iaculis sed hendrerit ante suscipit. Vivamus tortor dolor, varius mollis scelerisque sed, sollicitudin a tellus. Mauris sit amet tincidunt mauris. Sed sed massa arcu, non eleifend felis. Cras non lacus nisi. Nulla magna turpis, lobortis ac adipiscing sed, consequat sed augue.
            </p> 
            <p> 
            Donec vel purus tortor, ut viverra mauris. Vivamus urna sapien, eleifend at posuere a, malesuada nec risus. In vitae erat in mauris ornare iaculis. Phasellus consectetur vestibulum risus non facilisis. Ut eu nibh quam. Donec eu augue sit amet lacus feugiat ullamcorper eu bibendum arcu. Pellentesque elementum rutrum nisi, ut pellentesque est bibendum id. Fusce justo lacus, venenatis eu vehicula a, porttitor quis mi.
            </p> 
            <p> 
            Sed in felis urna, non vestibulum magna. Nullam vitae augue sed mauris fermentum facilisis. Sed dictum diam eget ante varius at rhoncus arcu rutrum. Suspendisse lorem neque, convallis a vehicula quis, faucibus faucibus elit. Sed eget mauris nec felis malesuada pharetra quis in eros. Fusce urna nisi, iaculis vitae blandit non, posuere et nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vel leo sem. Vestibulum posuere, neque non mollis laoreet, quam quam pretium elit, in tincidunt lacus lectus ac lorem. Mauris vel odio dolor. Phasellus faucibus lobortis justo id malesuada.
            </p> 
            <p> 
            Nullam sed dolor id purus feugiat tincidunt. Aliquam eget consequat lacus. Cras augue erat, mattis sed consequat eget, mattis vel tellus. Aliquam erat volutpat. Ut in ornare lorem. Nam quis sodales tellus. Sed consequat imperdiet mattis. Morbi quis odio quis massa pellentesque laoreet. Curabitur lacinia lacus risus. Maecenas tincidunt ullamcorper ultrices.<span class="ultimo">„&lt;/span>
                       </p> 
            
        </blockquote>    
    </li>
/* CSS Document */
@font-face {
    font-family: 'LoraBold';
    src: url('fonts/lora-bold-webfont.eot');
    src: url('fonts/lora-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-bold-webfont.woff') format('woff'),
         url('fonts/lora-bold-webfont.ttf') format('truetype'),
         url('fonts/lora-bold-webfont.svg#LoraBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LoraItalic';
    src: url('fonts/lora-italic-webfont.eot');
    src: url('fonts/lora-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-italic-webfont.woff') format('woff'),
         url('fonts/lora-italic-webfont.ttf') format('truetype'),
         url('fonts/lora-italic-webfont.svg#LoraItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LoraRegular';
    src: url('fonts/lora-regular-webfont.eot');
    src: url('fonts/lora-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lora-regular-webfont.woff') format('woff'),
         url('fonts/lora-regular-webfont.ttf') format('truetype'),
         url('fonts/lora-regular-webfont.svg#LoraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}



#conteudo ul.parcerias li.descricao blockquote {
    font-style:italic;
    margin:2em 0 3em 2em;
    quotes:'”' '„';
    
}


#conteudo ul.parcerias li.descricao blockquote span {
    font-size:1000%;
    color:black;
    display:inline;
    }

#conteudo ul.parcerias li.descricao blockquote span.ultimo {
    float:none;
    font-size:1000%;
    color:black;
    display:inline;
}

左引号显示在文本上方,并且左引号和右引号都在上面加上了一些边距,我意识到这是因为字体中的字符本身有这个空白,无论如何我可以补偿这个吗?

4

4 回答 4

6

如果您不必担心在 ie7 或更早版本中显示,我认为伪元素将是可行的方法。http://jsfiddle.net/EnL3R/16/

于 2012-08-28T16:11:28.040 回答
5

修改了padding、和属性margin,现在似乎可以正常显示了:displayposition

blockquote span {
    font-size:100px;
    color:black;
    position: relative;
    display:inline-block;
    padding:0px;
}

blockquote span.primo {
    margin: -40px 0 -100px 0;
    bottom: -40px;
}

blockquote span.ultimo {
    margin:-130px 0 0 0;
    bottom:0px;
}

/* IE7 only styles */
blockquote span {
    *display: inline; zoom: 1; /* IE7 fix for inline-block */
}
blockquote span.primo {
    *margin: -20px; *bottom: -20px; /* IE7 position adjustment */
}
blockquote span.ultimo {
    *margin: -50px; /* IE7 position adjustment */
}

http://jsfiddle.net/EnL3R/26/(标签周围的黄色边框span仅用于测试)

于 2012-08-28T15:55:54.857 回答
3

在我看来,使用图像可能会更好。如果您尝试使用文本作为引号,则会遇到这样一个事实,即引号本身只是行高的一小部分。

您可以将图像放入您的内容中并用于vertical-align获得正确的定位。如果您不需要对 IE 7 或更低版本的支持,您甚至可以将它们放在 CSS、the:before:after伪元素中。

blockquote :first-child:before {
    content: url('images/openquote.png');
    }

 blockquote :last-child:after {
    content: url('images/closequote.png');
    vertical-align: -35px; /* tuned to fit image */
}

演示:http: //jsfiddle.net/EnL3R/17/

于 2012-08-28T16:16:21.937 回答
-1

更新块引用的样式..检查下面的代码。

blockquote {
    font-size: 18px;
    padding:20px;
    text-transform: uppercase;
}
blockquote:before {
    top: 10px;
    left: 20px;
    content: "\201C";
}
blockquote:after {
   top:80px;
   content: "\201D";
}
blockquote:before, blockquote:after {
    position: absolute;
    width: 60px;
    height: 60px;
    font-size: 80px;
    line-height: 1;
    color: #dd7975;
}
于 2016-11-23T17:27:34.100 回答