webkit 的 CSS / HTML 文本换行

发布于 2024-10-18 21:43:08 字数 414 浏览 2 评论 0原文

我正在尝试实现与 facebook 相同的效果，如果状态太长，则将其包装起来。尝试使用 webkit 用户代理将您的状态设置为 300 个“A”字符之类的内容。他们是怎么做到的？

是的...我知道你可以使用： word-wrap：break-word

我在谷歌上搜索了很多，所有这些技巧只有在你可以提前设置宽度的情况下才有效，但我不能。我的宽度正在调整为 100% 屏幕尺寸，以便在调整大小（横向）时进行拉伸。

综上所述，在仅使用 webkit 的浏览器下，如何在不给元素或父元素指定特定宽度、不使用 JS 的情况下实现文本换行？

我可以注意到 FB 在父容器上使用此属性：

-webkit-box-sizing: content-box

但我无法将此应用于我的案例......

原文

I am trying to achieve the same effect facebook has with wrapping your status if it's too long.
Try to set your status to something like 300 "A" characters with a webkit user agent. How do they do that?

Yes... I know you can use:
word-wrap: break-word

I googled alot and all these tricks only work if you can set the width in advance, which I cannot.
My width is adjusting to 100% screen size to allow stretching when resizing (landscape).

So to sum this up, how can I achieve text wrap without giving a specific width to the element or a parent element, without using JS, under webkit only browser?

I could notice that FB use this property on the parent container:

-webkit-box-sizing: content-box

But I was not able to apply this to my case...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖 2024-10-25 21:43:08

我想我知道你在寻找什么，

诀窍是以下组合：

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

请参阅此 jsfiddle 进行演示 http://jsfiddle .net/bPsav/

I think I know what you are looking for,

The trick is the combo of:

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

See this jsfiddle for a demonstration http://jsfiddle.net/bPsav/

回复收藏 0 原文

如梦亦如幻 2024-10-25 21:43:08

我认为在提供给前端之前，它是用服务器端语言完成的。当您拥有如此庞大的用户群时，您通常希望远离内容操纵。有一个新的 CSS3 属性可以为您执行此操作，但它并未得到广泛支持。

text-overflow:ellipsis;

更多信息可以通过Google找到

I would assume it's done this way with a server side language before given to the front-end. You typically want to stay away from content manipulation when you have such a large user base. There is a new CSS3 property that will do this for you, but it's not widely supported.