[英]CSS3 ellipsis, centered text and responsive design
There's a billion of tutorials, but none have worked for me unfortunately. 有十亿个教程,但不幸的是,没有一个对我有用。 I need some artistnames to be in the header, centered, but with a css ellipsis, so very long names gets the "..." and will be truncated.
我需要在标题中居中放置一些歌手姓名,但要使用css省略号,因此很长的姓名会被“ ...”截断。
You can see the design here: http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php Remember to resize your browser window. 您可以在此处查看设计: http : //www.cphrecmedia.dk/musikdk/mobile/artistchannel.php记住要调整浏览器窗口的大小。
Its meant for mobiles, so I cannot have any fixed withs and it should work with all kinds of mobile screensizes. 它适用于手机,因此我不能使用任何固定值,它应该适用于各种手机屏幕尺寸。 I can make the ellipsis work, but then the text is no longer centered.
我可以使省略号起作用,但随后文本将不再居中。 Any clue on how to do this best?
关于如何做到最好的任何线索? I would really like to avoid any javascript as performance is highly important.
我真的想避免使用任何JavaScript,因为性能非常重要。
You need to update the rules for h1
with overflow
& text-overflow
. 您需要使用
overflow
& text-overflow
更新h1
的规则。
.header h1, .headerwhite h1 {
font-size: 15px;
line-height: 49px;
text-overflow: ellipsis;/* generates dots if text on one single line and truncated */
overflow: hidden;/* triggers text-oveflow and mids floatting elements */
white-space: nowrap;/* keep text on a single line to trigger text-overflow; */
display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */
}
basicly same answer as dartanian300 :) 与dartanian300基本相同的答案:)
You may control the max-width of h1
too and add a margin:auto;
您也可以控制
h1
的最大宽度,并添加margin:auto;
: demo : 演示
UPDATE 更新
Using display: inline-block
simply removes the h1
altogether on smaller screens. 使用
display: inline-block
仅在较小的屏幕上完全删除h1
。 You should avoid this. 您应该避免这种情况。
Also, technically, the text is still centered. 同样,从技术上讲,文本仍居中。 It takes into account the ellipsis when centering the text.
在将文本居中时,它考虑了省略号。
ORIGINAL ANSWER 原始答案
In order for the ellipsis styling to work, you've got to set a few things on the element with the text: 为了使省略号样式起作用,您必须在带有文本的元素上设置一些内容:
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block
ensures that the box you're trying to generate ellipsis on is shown as a block. display: block
确保将您要在其上生成省略号的框显示为块。 If it's not, it won't know where the bounding box is. 如果不是,它将不知道边界框在哪里。
text-overflow: ellipsis
obviously should generate the ellipsis. text-overflow: ellipsis
显然应该生成省略号。
overflow: hidden
for some reason, browsers won't generate the ellipsis unless you have this. overflow: hidden
由于某种原因overflow: hidden
,除非您有此操作,否则浏览器不会生成省略号。 I believe it has to do with the fact that the text will just flow outside the box with it. 我认为这与以下事实有关:文本将随文本一起流出框外。
white-space: nowrap
this prevents your text from wrapping onto multiple lines. white-space: nowrap
可以防止文本换行。 That way, you have one line with ellipsis at the end. 这样,您可以在一行的末尾加上省略号。
That work? 那工作吗
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.