只在真正需要时显示连字符？ （软连字符不要切断它）

Question

是否可以在CSS中使用连字符或软连字符，以便不会不必要地呈现连字符？

我的目标是尽可能地保留原始文本并打破任何单词，除非绝对关键，因为它们太长而无法容纳容器宽度。

我的具体案例

我想渲染文字＆＃34;嗨超人＆＃34;以这样的方式：

如果＆＃34;超人＆＃34;太长了，无法容纳在容器内，我想以某种方式将其连字，例如：

Hi Super-
man

但如果单词“超人”可以放入容器中，则必须使用连字符

进行渲染

Hi
Superman

如果上面的案例是可能的（＆＃34;超人＆＃34;可以不加思索地写），那么添加不必要的连字符是不可取的：

Hi Super-
man

我可以根据需要更改HTML。我允许以一种有意义的方式注入连字符（只要每个连字符之间有超过3个字母就可以了。＆＃34; Superma-n＆＃34;永远不会好的）

我尝试了什么

我认为软连字符是解决方案。所以我使用了：Hi Super­man

但我发现这会导致不可接受的情况，即不必要的连字符＃34;如上所示。

显示失败的小部件：

＆＃13;

＆＃13;

body { 
  margin-left: 30px;
}
div {
   border: solid 1px black;
}
.wide {
  border: solid 1px blue;
      width: 500px;
}
.narrow { 
  border: solid 1px red;
  width: 360px;
}
 h2 {
   font-family: 'Courier New';
    font-weight: 400;
    font-size: 87px;
  }
code {
 background-color: #eee;
}

＆＃13;

<p> <code>Super&amp;shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p>
<p>
<div class="narrow"><h2>Hi Super&shy;man</h2></div>

<p>But in this case the word "Superman" would fit unhypenhated on the second row. But the damn CSS decides to add hyphens anyway. Unacceptable in my case!
Again, this uses the same code as the previous example
<code>Super&amp;shy;man</code></p>
<div class="wide"><h2>Hi Super&shy;man</h2></div>

<p>I even tried adding a wordbreak tag before "Superman", like this <code>Hi &lt;wbr&gt; Super&amp;shy;man</code> but it does not help</p>
<p>  </p>
<div class="wide"><h2>Hi <wbr>Super&shy;man</h2></div>

＆＃13;

＆＃13;

＆＃13;

我可以用CSS解决上面的例子吗？ （尝试了不同的word-break属性但没有成功）

我的猜测是由于CSS的性质，用简单的HTML和CSS来解决这个问题是不可能的。我假设CSS只是逐行解析文本，它永远不会知道一个单词是否更适合＆＃34;在下一行文字上。如果它找到连字符，它将尝试在当前文本行上拟合最大量的字符。

我想用HTML和CSS来解决这个问题，或者根本不解决这个问题。 的修改： Preferrably - 不使用javascript进行文本解析。

- 我不想根据div的宽度以及是否需要连字符来设置每个div的不同CSS属性。

- 不想在我的文字周围添加包装

- 不能自动连字，可以导致像＃＆＃34; Superma-n＆＃34; （然而，只要在每个连字符之间有3个字符，我就可以使用自动自动连接。就像＆＃34; Superman＆＃34;）

Answer 1

CSS 3包含一个“hyphens”属性，可根据指定的lang属性设置连字符。但它只是working draft，所以支持有点not there yet。

您可以将其设置为

• none，因此不会显示连字符
• 手册，因此仅在声明特殊字符&shy或
的情况下才会中断单词
• auto，根据本地化情况自动在需要的地方添加连字符。

就像Firefox，Edge甚至IE中的魅力一样，但主要问题是webkit不支持“自动”值。除了mac和android之外，它是唯一值得接受的值。是的，就是那种奇怪的bug。

这是一个例子，如果你正在运行windows / linux，请务必检查firefox和chrome之间的区别。

p { 
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<ul>
    <li><code>auto</code>: hyphen where the algorithm is deciding (if needed)
    <p lang="en" class="auto">An extremelyasdasd long English word</p>
  </li> 
  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
    <p lang="en" class="manual">An extreme&shy;lyasd long English word</p>
  </li>
  <li><code>none</code>: no hyphen; overflow if needed
    <p lang="en" class="none">An extreme&shy;lyasd long English word</p>
  </li>
</ul>

Webkit缺乏“自动”支持的一个常见解决方法是使用连字符：auto与web work-break:break-all一起使用，因此在支持它的浏览器上会对文本进行连字，并且在webkit上不带连字符。

Answer 2

在长字周围使用body { margin-left: 30px; } div { border: solid 1px black; } .wide { border: solid 1px blue; width: 500px; } .narrow { border: solid 1px red; width: 360px; } h2 { font-family: 'Courier New'; font-weight: 400; font-size: 87px; } code { background-color: #eee; } .unbreakable {display:inline-block}的容器。

＆＃13;

＆＃13;

<p> <code>Super&amp;shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p>
<p>
<div class="narrow"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>

<p>And in this case the word "Superman" would fit unhypenhated on the second row.<br/>
This uses the same code as the previous example</p>
<div class="wide"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>

＆＃13;

body {
  margin-left: 30px;
}

.narrow {
  border: solid 1px red;
  width: 360px;
}

h2 {
  font-family: 'Courier New';
  font-weight: 400;
  font-size: 87px;
}

.unbreakable {
  display: inline-block
}

＆＃13;

＆＃13;

＆＃13;

编辑：哦，我确实找到了一个缺陷：在包装器中打破的单词会占用所有两行，而不是在同一行上允许更短的单词。在下面的例子中，文本＆＃34; man是＆＃34;如果它没有用于这个技巧，它将适合在一条线上。

＆＃13;

＆＃13;

<div class="narrow">
  <h2><span class="unbreakable">Super&shy;man</span> is coming.</h2>
</div>

＆＃13;

    module register_window(port_A, port_B, PD, CWP, A, B, C, loadRF, clk);

output reg[4:0] port_A;
output reg[4:0] port_B;
input [31:0] PD; 
input [1:0] CWP;    
input [4:0] A;    
input [4:0] B;
input [4:0] C;
input loadRF; 
input clk;

    reg ld; //enable 

    wire  [3:0] t;
    decoder_2x4 decoder2by4(CWP, t, loadRF);

    wire [31:0] bitDecoder1;
    decoder_5x32 decoder0(C, bitDecoder1, t[0]);

    wire [31:0] bitDecoder2;
    decoder_5x32 decoder1(C, bitDecoder2, t[1]);

    wire[31:0] globalReg0;
      assign ld = (bitDecoder1[0] == 32'b0 ||bitDecoder2[0] == 32'b0||bitDecoder3[0] == 32'b0||bitDecoder4[0] == 32'b0);
     registers g0(globalReg0, PD, ld, clk);      

    // G1
    wire[31:0] globalReg1;
      assign ld = (bitDecoder1[1]== 32'b0||bitDecoder2[1]== 32'b0||bitDecoder3[1]== 32'b0||bitDecoder4[1]== 32'b0);
     registers g1(globalReg1, PD, ld, clk);

     wire[31:0] globalReg2;
     assign ld = (bitDecoder1[2]== 32'b0||bitDecoder2[2]== 32'b0||bitDecoder3[2]== 32'b0||bitDecoder4[2]== 32'b0);
    registers g2(globalReg2, PD, ld, clk);

＆＃13;

＆＃13;

＆＃13;

所以，不，不完美。遗憾。