在 Angular / Ionic 应用程序中添加连字符

Posted 2023-03-13

【中文标题】在 Angular / Ionic 应用程序中添加连字符

【英文标题】：Add hyphenation in Angular / Ionic apps

【发布时间】：2018-01-31 00:29:21

【问题描述】：

我在 Ionic 3 应用程序中使用了离子网格。有些单词不适合列，因此被截断并在下一行继续。没有添加连字符（“-”），并且分隔符没有任何语法上下文。像这样：

这看起来真的很难看。我想以某种方式添加连字符。但是，我没有让它运行。

我尝试了css-way（如下），但这没有任何效果

<ion-grid lang="...">

ion-grid
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;

有人知道怎么做吗？

【问题讨论】：

浏览器对 CSS 断字的支持非常参差不齐。考虑使用库。

考虑到 Ionic/Angular 应用的用途，您有什么可以推荐的吗？

【参考方案1】：

根据 cmets 中 torazaburo 的建议，我决定使用 javascript 库。 我最终使用了 bramstein 的 hypher-library。

效果很好。我在 Ionic 3 中的实现：

homePage.ts

// after imports declare hypher-variables
var Hypher = require('hypher');
var german = require('hyphenation.xx');
// xx stands for the language-pattern, e.g. "en-us". A full list can be found here: https://github.com/bramstein/hyphenation-patterns/tree/master/patterns

@Component(
  selector: 'home-page',
  templateUrl: 'home.html'
)

export class HomePage 
  h = new Hypher(language);  

  constructor(...)  

  hyphenateWord()
    let hypenatedWord = this.h.hyphenateText("ThisIsAVeryLongWord);
  

【讨论】：

一个理想的解决方案是创建一个类似于text-hyphen 的离子属性，类似于text-wrap。但我不知道如何以及是否可以创建自己的自定义属性。