Question

我有一个侧边栏占据了总屏幕宽度的12％（设置为css属性）。我在这个div中也有一个<h1>块，带有标题。当我将显示器切换到较小的显示器时，侧边栏最终变得更加薄，导致标题延伸到侧边栏的外边。

我如何格式化以便文本始终保持在行内？（＆＃34;我的TI ...＆＃34;结果很好）

Answer 1

对于CSS而言，没有100％肯定的方法，但标题通常应该分为两行，这比它在屏幕截图中做的更好。如果您希望有人查看该代码，请发布您的代码。

你应该做的是使用媒体查询使侧栏在较小的屏幕上更宽：

.sidebar
{
  width:12%;
}

@media screen and (max-width: 600px) {
  .sidebar
  {
    width:30%;
  }
}

这是一个例子

http://codepen.io/nathanfelix/pen/KzZPGy

此外，您可以在此处阅读有关媒体查询的更多信息： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

如果已知标题文字，您可以在原始样式或媒体查询中为vw使用视口单元font-size。

您还需要将侧边栏width设置为vw，或将百分比值设置为全部响应。

html, body {
  height: 100%;
  margin: 0;
}
.sidebar {
  border-right: solid;
  height: 100%;
  float: left;
  width: 15vw;
}
.sidebar h1 {
  font-size: 4vw;
  text-align: center;
}

<div class="sidebar">
  <h1>MyTitle</h1>
</div>

<强> jsFiddle

另一个解决方案是使用CSS省略号，将溢出文本替换为“...”。

html, body {
  height: 100%;
  margin: 0;
}
.sidebar {
  border-right: solid;
  height: 100%;
  width: 15%;
  float: left;
}
.sidebar h1 {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="sidebar">
  <h1>MyTitle MyTitle MyTitle</h1>
</div>

<强> jsFiddle

Answer 3

请尝试这样：

$.ajax({
type: 'GET',
url: '/Lecture/GetParticipantsToAttend',
dataType: 'json',
data: { id: lectureId },
success: function (participants) {

    var table = '<table class="table-striped form-control" id="tblParticipants"> ';
    $.each(participants, function (i, participant) {
        var tr = '<tr> ';
        tr += '<td class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> ';
        tr += '<label> ' + participant.FullName;
        tr += '</label>' + '</td> ';
        tr += '<td class="text-center col-lg-1 col-md-1 col-sm-1 col-xs-1">';
        tr += (participant.Attended == true ? '<input type="checkbox" value="' + participant.ParticipantId + '" checked="checked"/>' : '<input type="checkbox" value="' + participant.ParticipantId + '" />');
        tr += '</td> ';
        tr += '</tr> ';
        table += tr;
    });
    table += "</table>";

    bootbox.dialog({
        backdrop: false,
        title: "Attendance",
        message: table,
        buttons: {
            success: {
                label: "Save",
                className: "btn-success",
                callback: function () {

                }
            },
            danger: {
                label: "Cancel",
                className: "btn-danger",
                callback: function () {

                }
            }
        }
    });

}});

根据屏幕宽度调整侧栏中的文本大小

3 个答案: