php - 翻译时导航栏延伸到第二行

Question

我正在构建一个将以英语或西班牙语动态显示的网站。在西班牙语中，单词更长，导致导航栏重叠到第二行。

http://bit.ly/ZZ5Waq

我需要更改什么代码？

谢谢！-卡伦

编辑：我宁愿不让字体变小。重要的是它在英语中保持相同的大小。

但是我愿意在西班牙语版本中使它更小/减少填充。

如果页面的 URL 中有 /es/ ，有谁知道如何添加 CSS 样式？最好用PHP。

Answer 1

您可以修复菜单项的宽度，然后将文本换行到每个链接中的额外行。所以导航栏仍然是一行，但按钮变得更深。

两个可能的缺点及其解决方案：

问题：根据你的 CSS，很长的单词要么超出固定宽度，要么被迫在单词中间换行。

解决方案：接受中间的断词，或者让你的翻译使用不同的、更短的词。只要您不执着于在两种语言中使用完全相同的措辞，几乎可以用任何语言做到这一点。

问题：单行导航链接不会自动调整到两行按钮的深度，因此如果您的链接有边框或以其他方式显示其各自的高度，您的导航可能看起来不均匀。

解决方案：多个。

• 将所有链接设置为可以容纳两条线的固定高度，并将类型垂直居中（您可以使用“display:table-cell;”来执行此操作）或让它保持顶部对齐。
• 使用 jQuery 测量最高的链接（或包含 div 的高度）并使所有链接的高度相同。

在构建多语言网站时，我通常会尝试通过设计来避免这个问题——在导航栏中留出足够的空白空间来增加单词，并让翻译人员使用较短的单词。

编辑：

要在 PHP 中获取 URL，请使用 $_SERVER['REQUEST_URI']

<?php $url = $_SERVER['REQUEST_URI'];
if(strpos($url,'/es/')) { ?>
    <style type="text/css">
        .menu a { letter-spacing: 0; }
    </style>
<?php } ?>

Answer 2

您可以做很多事情来制作导航栏 1 行。

1) 制作font-size具有更短字符间距的更小或不同的字体样式。

2) 同样，您可以尝试将padding每个菜单列表中的 缩小，以使其适合。

3) 尽管您可能不想这样做，但您甚至可以使站点的西班牙版本具有不同的布局宽度（使容器的宽度更大）。

有很多不同的方法，你只需要改变你的代码，看看它的样子。也可能是您最终使用 2 行，或者您可能只是找到了一种缩短菜单列表的方法。

如果不发布您的任何代码，将很难进一步帮助您。