Javascript 如何在不造成段落空白的情况下正确地进行催眠？_Javascript_Jquery_Css

Javascript 如何在不造成段落空白的情况下正确地进行催眠？

javascript jquery css

Javascript 如何在不造成段落空白的情况下正确地进行催眠？,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试使断字正确工作 <!doctype html>  <html lang="nl"> <head> <link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet"> <title>HYPHENATE</title> <style> html

我正在尝试使断字正确工作

<!doctype html>
<!-- lset language-->
<html lang="nl">
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet">
<title>HYPHENATE</title>
<style>
html {
    background: #fff;
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.product-name {
    width: 113px;
    font-weight: 900;
    color: #231f20;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    overflow: hidden;
    font-family: "Chivo", sans-serif;
    background-color: grey;
}
</style>
</head>

<body>
    <div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>

</html>

与断字后一样，“MET”后面有足够的空间放置“TIJD-”

如何修复代码，以便在有足够空间的情况下，连字符的音节自动延续到前面的单词后面？

基本问题是浏览器有一个连字符算法，您不能干扰它。浏览器将根据需要对文本进行布局。（当然，MS Word、InDesign或任何其他文本软件也是如此。只是通过适当的布局软件，您可以更好地控制文本属性。）

浏览器将“TIJD-”移动到下一行的原因是，它的宽度对于浏览器放置文本的空间来说太小了，所以它别无选择，只能移动它

有两个选项可用于更改文本的流动方式。首先是对元素宽度、字体大小或字体紧排进行微调。（您可以在整个文本中执行此操作，也可以使用

span

）仅对有问题的部分执行此操作）这将改变文本流背后的数学运算，并可能使您产生更美观的结果

第二种方法是使用硬空格（）、细空格（；）或（作为一个真正的bodge）

span

s加上填充，而不使用任何真正的空格，以尝试强制浏览器按您的需要排列文本

但是，因为所有的浏览器都是不同的，所以无论您选择什么选项，都无法保证结果。如果获得正确的外观至关重要，那么您需要使用图像（但如果这样做，请不要忘记可访问性）

奇怪的是，我发现通过注释掉“overflow:hidden”并在product name类中添加“display:table”，我得到了我想要的。删除“overflow:hidden”使音节很好地移动到前面的单词后面。当我转到另一个浏览器窗口时，由于某种原因，这些音节再次向下移动，但通过添加“display:table”得到了修复。下面是生成的代码。导致上述良好结果。不知道为什么这会起作用，但css有时会神秘地起作用：-）


连字符
html{
背景：#fff；
/*警告：需要旧的支持，但单词是按字母分开的*/
-ms word break：打破一切；
单词break：打破一切；
/*webkit的非标准*/
断字：断字；
溢出包装：断开单词；
-webkit连字符：自动；
-moz连字符：自动；
-ms连字符：自动；
连字符：自动；
}
.产品名称{
/*增加显示：表格*/
显示：表格；
宽度：113px；
高度：300px；
字号：900；
颜色：231f20；
字号：18px；
线高：22px；
文本转换：大写；
字体系列：“Chivo”，无衬线；
/*溢出：隐藏*/
背景颜色：灰色；
}
Bijzettafel Aspen会见了tijdschriftenrek

BIJZETTA-
FEL ASPEN
MET TIJD-
SCHRIFTEN-
REK

<!doctype html>
<!-- lset language-->
<html lang="nl">
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet">
<title>HYPHENATE</title>
<style>
html {
background: #fff;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;

/* Non standard for webkit */
word-break: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.product-name {
   /* added display: table*/
    display: table;
    width: 113px;
    height: 300px;
    font-weight: 900;
    color: #231f20;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    font-family: "Chivo", sans-serif;
    /*overflow: hidden;*/
    background-color: grey;
}
</style>
</head>

<body>
    <div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>

</html>