我公司的UI设计师和营销人员不希望“尴尬的换行”。如何处理CSS或JS?

时间:2022-10-07 20:05:04

I have a technical question. I'm a front-end developer and always get requests about changing

我有一个技术问题。我是一名前端开发人员,总是会收到有关更改的请求

"awkward line breaks"

“尴尬的换行”

or

"too much white space"

“太多的白色空间”

or other stuff related to how text of varying lengths wraps onto lines. I'm wondering what CSS and JavaScript I need to prevent text awkwardness. The persons who manage the content want to be able to type any content into the content management system and have it come out non-awkward at every screen size.

或其他与不同长度的文本如何包裹在线上有关的东西。我想知道我需要什么CSS和JavaScript来防止文本尴尬。管理内容的人希望能够在内容管理系统中键入任何内容,并且在每个屏幕尺寸上使其变得非常笨拙。

Is there a CSS property like

有没有CSS属性

text-awardness: non-awkward

or

line-break: always-look-perfect

If not, is there a JavaScript library named something like awkfixer.js whereby I can apply a class like

如果没有,是否有一个名为awkfixer.js的JavaScript库,我可以应用类似的类

<p class="fix-awkardness">Thiiiiiiiiiiiiiisssssssssss word is long and so it might cause a visible space if we're not applying word-break</p>

??

1 个解决方案

#1


0  

It depends what you mean by awkwardness, but hyphenation and line-breaks might help here.

这取决于你的尴尬意味着什么,但连字符和换行符可能会有所帮助。

CSS3 supports a property called hyphens.

CSS3支持名为连字符的属性。

hyphens: auto;

handling awkward line breaks is a little trickier than a one line fix, but some combination of pseudo elements and margins in your css might do the trick for you.

处理尴尬的换行符比单行修复要复杂一些,但是你的css中的伪元素和边距的某种组合可能会对你有所帮助。

#1


0  

It depends what you mean by awkwardness, but hyphenation and line-breaks might help here.

这取决于你的尴尬意味着什么,但连字符和换行符可能会有所帮助。

CSS3 supports a property called hyphens.

CSS3支持名为连字符的属性。

hyphens: auto;

handling awkward line breaks is a little trickier than a one line fix, but some combination of pseudo elements and margins in your css might do the trick for you.

处理尴尬的换行符比单行修复要复杂一些,但是你的css中的伪元素和边距的某种组合可能会对你有所帮助。