我正在 Kendo UI Scheduler 中使用水平资源分组，我想调整标题与会者姓名，与自动换行 CSS 属性相同，以便姓氏出现在第二行。请帮助我实现这一目标。 相关道场链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-ocean-blue.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script>
</head>
<body>
<script id="groupHeaderTemplate" type="text/x-kendo-template">
<strong style="color: #=color#">#=text#</strong>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
groupHeaderTemplate: $("#groupHeaderTemplate").html(),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
isAllDay: true,
title: "Interview",
attendees: [1,2]
}
],
group: {
resources: ["Attendees"],
orientation: "horizontal"
},
resources: [
{
field: "attendees",
name: "Attendees",
dataSource: [
{ value: 1, text: "Alex Lastname" },
{ value: 2, text: "Bob Lastname" }
],
multiple: true
}
]
});
</script>
</body>
</html>
你可以用普通的 CSS 来完成，这里我使用
white-space: pre-line;width: min-content;text-align: center.k-scheduler-header th {
text-align: center;
}
.k-scheduler-header th strong {
white-space: pre-line;
width: min-content;
display: inline-block;
text-align: center;
}