[CSS]Flexbox and Truncated Text(译)_html/css_WEB-ITnose
程序员文章站
2022-06-15 13:08:27
...
原文:
Flexbox and Truncated Text
译文:Flexbox 遇上换行文本
当你遇到这样的情况:在一个 flex 子元素中有一个单行文本,你不想让文本自动换行,用省略号断行(或者隐藏其余的部分)。但意想不到的是,布局截断了并强制整个 flex 父元素变宽。利用 flexbox 可以让布局变得更容易!
有一种标准的解决方案,只需要使用 non-flexbox 属性值就可以完成。
我们想要的效果是这样的
这个动画展示了一个变窄后的子元素。
你会遇到的问题是这样的
这个动画展示了没换行的文本阻止了变窄。
子元素的问题
让人不解的是如果文本直接在 flex 子元素内,就会很好:HTML 代码:
Textto truncatehere.
推荐阅读
-
请教大牛!HTML中TEXT内如何让空格与普通字符宽度一样?_html/css_WEB-ITnose
-
面向 Web 开发者的 Sublime Text 插件_html/css_WEB-ITnose
-
[译](深入了解CSS Box Shadow)_html/css_WEB-ITnose
-
[CSS]Flexbox and Truncated Text(译)_html/css_WEB-ITnose
-
请教大牛!HTML中TEXT内如何让空格与普通字符宽度一样?_html/css_WEB-ITnose
-
[CSS]Flexbox and Truncated Text(译)_html/css_WEB-ITnose
-
【译】建立更好的可访问性原语_html/css_WEB-ITnose
-
[CSS3] Using CSS’s object-fit and object-position Properties(译)_html/css_WEB-ITnose
-
面向 Web 开发者的 Sublime Text 插件_html/css_WEB-ITnose
-
[CSS3] Using CSS’s object-fit and object-position Properties(译)_html/css_WEB-ITnose