标题添加书名号并超出省略

一、使用伪元素生成书名号没错,很多同学可能会想到用伪元素,前后各添加一个就好了.books::before{
content: '《'
}
.books::after{
content: '》'
}效果如下
标题添加书名号并超出省略_第1张图片
除了手动使用伪元素生成伪元素外,还可以用 CSS quotes 来生成书名号.books{
quotes: "《" "》"
}但是,普通元素直接写这个没什么效果,只有q标签才会显示书名号灵境行者

斗破苍穹


我师兄实在太稳健了


...
图片
原因是,q标签会自带默认样式,自动创建了伪元素
图片
所以,普通元素如果也想用quotes属性,可以手动添加.books::before{
content: open-quote
}
.books::after{
content: close-quote
}效果如下
标题添加书名号并超出省略_第2张图片
不过这样好像还不如直接使用伪元素方便了吧?二、书名号内文本超出省略CSS 单行文本超出省略很容易,只需要下面 3 行white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;当宽度比较小时,部分标题也发生了省略,如下
图片
有设计师表示,这样不是很好看‍♀️,这个省略号能否在书名号里面呢,就像这样
标题添加书名号并超出省略_第3张图片
正常情况下,我们会选择给中间的文本额外新增一层标签,然后把文字省略设置在这个标签上灵境行者

斗破苍穹


我师兄实在太稳健了


...但是如果无法更改HTML结构,这里有办法只用一层标签实现吗?当然也是有的,下面介绍两个思路

你可能感兴趣的:(typescript)