Question

我的页面标题很短但有中长词，我希望句子中最长的单词符合屏幕的宽度。

960像素

|                              |
|The Metropolitan Museum of Art|
|                              |

在移动设备上（屏幕低于大约400px）我想自然地包装文本，并减小尺寸，以便该标题中最长的单词决定字体大小。

x 460像素

|                |
|The Metropolitan|
|Museum of Art   |

或更小

320像素

|The    |
|The Metropolitan| <----- "Metropolitan" bleeds out of the page
|Museum |
|of Art |

根据＆＃34; Metropolitan＆＃34;是否有规则可以减少字体大小字？

我不想打断文字：这只是糟糕的排版。

我知道我需要媒体查询，这不是问题所在。问题是，如果我有一个像＆＃34; supercalifragilistic＆＃34;即使我设置320px和font-size：12px的媒体查询，它也会留下空格或者出血。

Answer 1

您可以尝试使用流体排版

CSS：

return Excel::create('Orders', function ($excel) use ($data) {
    $excel->setTitle('Open orders');
    $excel->setKeywords('orders, excel, export');

$excel->sheet('Open orders', function ($sheet) use ($data) {
 // $sheet->getStyle('C2:C10')->getNumberFormat()->setFormatCode('0.00'); // no effect
//    $sheet->setColumnFormat(array('C2:C10' => '0')); // no effect
$sheet->setColumnFormat(array('C2:C10' => '#0')); // no effect
// $sheet->getStyle('C2:C10')->getNumberFormat()->setFormatCode('$#,###'); // no effect

            $sheet->fromArray($data);
            $sheet->freezeFirstRow();
            $sheet->row(1, function ($row) {
            $row->setBackground('#aaffaa');
            $row->setBorder('solid', 'none', 'none', 'solid');
            });
        });
    })->download($type);
}

Example我找到了。

Answer 2

如果您希望文字的大小与设备尺寸相关，请使用相对测量单位，例如 vw

例如：

heading {
   font-size: 10vw;
}

Answer 3

尝试像这样调整字体大小

html {
    font-size: 100%;
}

@media only screen and (max-width: 460px)
html {
    font-size: 90%;
}

@media only screen and (max-width: 320px)
html {
    font-size: 80%;
}

减小小屏幕上的字体大小，使单词不会破坏

3 个答案: