如何根据CSS语言添加连字符？

Question

我有一个与语言和CSS有关的问题。我正在一个项目中工作，在移动版本中，它必须打破一个特定的词。

这个词是“Buchungssystem”（它是一个H1标签），在移动版本中它必须被打破到“Buchungs-” 系统“

我是怎么做到的？

Answer 1

如果单词太长，我会使用soft hyphen通知浏览器应该在哪里中断。

然后你会得到像Buchungs­system这样的东西。如果需要单词中断，浏览器应该尝试将其放在单词中的（一个）软连字符位置。

Answer 2

这可以帮助您解决问题吗？

div {
    width: 200px;
    height: 80px;
    display: block;
    overflow: hidden;
    border: 1px solid red;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

<div>Buchungs&shy;system&shy;</div>

它的工作方式是插入一个你想要添加连字符的位置。当你使div的宽度变小时，可以看到你的单词被分割了。

接下来就是让页面响应所有设备。

• 1. 在head：
  中设置视口元标记
• 1. 使用媒体查询。
• 1. 或者我们可以直接使用RWD框架：
     • 自举
     • 基金会等。

我添加了fiddle，因此您可以自行测试

Answer 3

使用javascript检查屏幕的宽度使用screen.width，如果宽度小于1080px（假设全高清显示），h1标签应该有“Buchungs- system”作为innerHTML文本。我会告诉你。

HTML：

<h1 id="heading"></h1>

使用Javascript：

if(screen.width < 1080) 
    document.getElementById("heading").innerHTML = "Buchungs-system";
else 
    document.getElementById("heading").innerHTML = "Buchungssystem";