标签: soft-hyphen

如何解决网页上的软连字符问题？在文本中可能有一些长词,您可能想要用连字符换行.但是你不希望连字符显示整个单词是否在同一行.

根据这个页面 <wbr>上的评论是由Netscape发明的非标准"标签汤".它似乎­ 也存在标准合规性方面的问题.似乎没有办法为所有浏览器提供有效的解决方案.

处理软连字符的方法是什么？为什么选择它？有优选的解决方案还是最佳实践？

想象一下,我在DIV中有一个长的,多字的文本行:

你好,亲爱的顾客.请看看我们的优惠.

DIV具有动态宽度.我想用自己的文字包装上面的文字.目前,包装发生在一个单词边界上,它最大化了第一行的长度:

|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.

我希望包装发生在句子边界上.但是,如果不需要包装,我希望该行保持为一个.

为了说明我的观点,请查看各种DIV宽度以及我希望如何包装文本:

|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer. 
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear 
customer. 
Please have a look
at our offer.

使用单词,您可以使用软连字符,以便在建议的音节边界上进行自动换行.如果不需要包装,则­保持不可见.如果需要包装­,它就是它发生的地方:

magnifi­cently

是否有类似的方法来暗示HTML中的自动换行？

我有一点布局问题:在客户网站上,我们在一个小盒子里显示人们的联系信息.该框的宽度受到限制.事实上,有些人名字很长(毕竟这是在德国......),电子邮件地址是给定姓名和姓氏的串联.结果:对于某些名称,电子邮件地址会溢出about框所给出的约束.

­在@结果之前插入正确的换行符,但看起来像这样:

john.doe-
@example.com

是否有可能抑制破折号？我不想使用<br />,因为对于90%的名称,可用宽度绰绰有余.

在 iOS 15 中，设置文本时不考虑软连字符 ( \u{00AD}UILabel ) 。例如：以下代码在 iOS 13 和 14 中正确渲染带有软连字符的文本，但在 iOS 15 中则不然。

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var label: UILabel!

override func viewDidLoad() {
    super.viewDidLoad()
    label.text = "Very\u{00AD}VeryVeryVeryVeryVeryLongWordWithASoftHyphenTo"
  }
}

结果：

如何让 UILabel 考虑iOS 15 中的软连字符 ( \u{00AD} )？

我试图在div中包装一个电子邮件地址,否则它会溢出因为它对于div的宽度来说太长了.

我知道此问题已经在此处讨论过(例如这个问题),但是请继续阅读,因为我涵盖了那里和其他地方提到的所有可能的解决方案.

以下解决方案都没有完全符合我的要求:

1. CSS

   "word-wrap: break-word".
   

   Run Code Online (Sandbox Code Playgroud)

   根据div的宽度,这会破坏尴尬地方的电子邮件地址.例如

   info@longemailaddress.co.u

   ķ

2. 在HTML中使用Soft Hyphen:

   ­
   

   Run Code Online (Sandbox Code Playgroud)

   这确实得到了很好的支持,但在页面上呈现了一个可见的连字符,导致用户相信电子邮件地址中有一个连字符:

   信息@长

   emailaddress.co.uk

3. 在电子邮件地址中使用thinspace或零宽度空间:

     (thinspace)
   ​ (zero-width space)
   

   Run Code Online (Sandbox Code Playgroud)

   这两个插入额外的字符(如果用户复制粘贴,则更糟糕)

4. Linebreaks ......

   <br />
   

   Run Code Online (Sandbox Code Playgroud)

   ...因为,大多数情况下,div足够大,可以在一行中包含电子邮件地址.

我想我希望在HTML/CSS中做一些巧妙的方法,也许是利用伪元素(例如:在/之后),或者使用软连字符,但不知何故以某种巧妙的方式用CSS隐藏它.

我的网站使用jquery,所以如果必须的话,我会诉诸于此,虽然我不想仅为这个小问题包含一个完整的连字库!

请在明信片上的答案.(或者,理想情况下......)

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

我的目标是尽可能地保留原始文本并打破任何单词,除非绝对关键,因为它们太长而不适合容器宽度.

我的具体情况

我希望以这样的方式呈现文本"Hi Superman":

如果单词"Superman"太长而无法装入容器内,我想以某种方式将其连字,例如:

Hi Super-
man

但如果"超人"这个词可以放入容器中,它必须在没有连字符的情况下呈现

Hi
Superman

如果上面的情况是可能的("超人"可以写成不受影响),那么添加不必要的连字符是不可取的:

Hi Super-
man

我可以改变我想要的HTML.我被允许以一种有意义的方式注入连字符(只要每个连字符之间有超过3个字母就可以了."Superma-n"永远不会好的)

我试过的

我认为软连字符是解决方案.所以我用过:Hi Super­man

但我发现这将导致上面所示的"不必要的连字"的不可接受的情况.

显示失败的片段:

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;
}

<p> <code>Super&amp;shy;man</code> looks good in really narrow containers where the …

<Text>
Aufmerksamkeits{'\u00AD'}defizit
</Text>

这导致在 iOS 上

Aufmerksamkeits-
defizit

但在 Android 上

奥地利
联邦税局

因此，Android 似乎忽略了给定的软连字符。我怎样才能在 Android 上也能正常工作？

谢谢！

在API 23的TextView叫法文本正确： longwooord\u00AD1231232131被正确地从分裂\u00AD导致炭longwooord-和1231232131下一行。然而，API 21\u00AD只是被忽略，单词在到达文本区域的右边界时被拆分。有没有办法在 API 21 中复制 API 23 断字行为？

我们来看下面的代码:

$('#el').html('ex­am­ple');

现在,我如何用软连字符实体取回该元素的文本？这两个:

$('#el').html();
$('#el').contents().get(0).nodeValue;

给我"例子"作为回报价值,而不是"ex­ am­ ple"

jsFiddle链接:http://jsfiddle.net/w7QKH/

浏览器:FF7,未在其他浏览器中检查.

假设我有一个充满软连字符的字符串(假设下面文本中的连字符是软连字符):

T-h-i-s- -i-s- -a- -t-e-s-t-.-

我想删除软连字符,只返回以下字符串:

This is a test.

我试图在JavaScript中这样做.以下是我到目前为止最远的:

RemoveSoftHyphen: function (text) {
    var result = text.match(/[^\uA00AD].*/);
    alert (result);
    return result;
}

当显示警报时,我得到的只是一个" - ",我不确定这是一个软或硬连字符......但更重要的是,它不起作用.

我试图找出我的正则表达式有什么问题,或者是否有更好的方法去除软连字符,我不知道使用JavaScript或jQuery.

我正在寻找可能会破坏 HTML 行（例如空格）的字符和元素的列表，但我在 Internet 上找不到任何包含正常 HTML 换行行为定义的页面。我找到了那些：

• 可分割的空间，
• 标签，
• 新队
• 零宽度空间（亚洲）
• 较少的 ”-”
• 软连字符

当然，我不希望它打破“pre”标签！