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

时间:2016-04-06 19:07:20

标签: html css

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

enter image description here

我如何格式化以便文本始终保持在行内? (&#34;我的TI ...&#34;结果很好)

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

如果已知标题文字,您可以在原始样式或媒体查询中为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

答案 2 :(得分:0)

请尝试这样:

$.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 () {

                }
            }
        }
    });

}});