垂直引导面板标题

Question

我正在尝试设计垂直引导标题面板，我几乎用这个实现了它

.panel
{
    position: relative;
}

.panel-default > .panel-leftheading
{
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-primary > .panel-leftheading
{
    color: #fff;
    background-color: #428bca;
    border-color: #428bca;
}

.panel-success > .panel-leftheading
{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.panel-info > .panel-leftheading
{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.panel-warning > .panel-leftheading
{
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.panel-danger > .panel-leftheading
{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.panel-leftheading
{
    width: 42px;
    padding: 10px 15px;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    float: left;
    height: 100%;
    position: absolute;
}

.panel-lefttitle
{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 15px;
    font-size: 16px;
    color: inherit;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    white-space: nowrap;
}

.panel-rightbody
{
    float: left;
    margin-left: 45px;
    padding: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="page-header">
    </div>
    <div class="row">
    	<div class="col-md-6">

<div class="panel panel-primary">
  <div class="panel-leftheading">
      <h3 class="panel-lefttitle">Panel title</h3>
  </div>
  <div class="panel-rightbody">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      
  </div>
    <div class="clearfix">
    </div>
</div>

    </div>
</div>

现在标题设置为垂直，但字体对齐方式不如预期。标题上的字体应该是可读的，并且必须像这张图片一样水平

我需要更改什么 css？

Answer 1

你可以去掉transforms和margin-left，并添加一个小于font-size(这里是16px)的width(这里设置为0)来获得效果：

.panel-lefttitle {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: center;
  width: 0;
}

还注意到在word-wrap: break-word 和white-space: pre-wrap 中添加了文本以保持空格/换行符垂直流动。

.panel {
  position: relative;
}
.panel-default > .panel-leftheading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-primary > .panel-leftheading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}
.panel-success > .panel-leftheading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-info > .panel-leftheading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-warning > .panel-leftheading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.panel-danger > .panel-leftheading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.panel-leftheading {
  width: 42px;
  padding: 10px 15px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  float: left;
  height: 100%;
  position: absolute;
}
.panel-lefttitle {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: center;
  width: 0;
}
.panel-rightbody {
  float: left;
  margin-left: 45px;
  padding: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header">
  </div>
  <div class="row">
    <div class="col-md-6">

      <div class="panel panel-primary">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle">Panel title</h3>
        </div>
        <div class="panel-rightbody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
        <div class="clearfix">
        </div>
      </div>

    </div>
  </div>

让我知道您对此的反馈。谢谢！

Answer 2

1. 您可以通过<br> 元素使用手动样式，但这会很烦人。

2. 您可以将每个字母包装到它自己的<span> 元素中。这样会更舒服，但还是太静态了。

3. 使用 CSS。更准确地说，使用word-wrap。为此，您必须像这样调整 .panel-lefttitle 样式：

   .panel-lefttitle {
       width: 0;
       word-break: break-word;
       margin-top: 0;
       margin-bottom: 0;
       font-size: 16px;
       color: inherit;
       position: absolute;
   }
   

您必须设置width:0，以便每个字母都显示在单独的行中。 Live Demo

Answer 3

我已经更改了您的h3 的width 和margin，删除了transform 并更改了white-space。

如果要更改字母的对齐方式，可以更改text-align。

这里是您需要的解决方案：

.panel {
  position: relative;
}
.panel-default > .panel-leftheading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-primary > .panel-leftheading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}
.panel-success > .panel-leftheading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-info > .panel-leftheading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-warning > .panel-leftheading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.panel-danger > .panel-leftheading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.panel-leftheading {
  width: 42px;
  padding: 10px 15px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  float: left;
  height: 100%;
  position: absolute;
}
.panel-lefttitle {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0px;
  font-size: 16px;
  color: inherit;
  position: absolute;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 7px;
  line-height: 16px;
  text-align: left;
}
.panel-rightbody {
  float: left;
  margin-left: 45px;
  padding: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header">
  </div>
  <div class="row">
    <div class="col-md-6">

      <div class="panel panel-primary">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle">Panel title</h3>
        </div>
        <div class="panel-rightbody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
        <div class="clearfix">
        </div>
      </div>

    </div>
  </div>

Answer 4

这可能会有所帮助。我将每个字母转换为一个跨度元素并旋转每个字母。它不是很漂亮，但演示了如何解决这个问题。

我只添加了一些 JavaScript 来实现您想要的行为。

此代码（部分）来自 Matt Whipple 的回答 in this post。

$(function() {
    $(".panel-lefttitle").html(("<span>" + $(".panel-lefttitle").html().split("").join("</span><span>") + "</span>"));
    $(".panel-lefttitle span").each(function() {
        $(this).css({
            "-webkit-transform": "rotate(-90deg)",
            "display": "inline-block",
            "letter-spacing": "1em"
        });
    });
});

.panel
{
    position: relative;
}

.panel-default > .panel-leftheading
{
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-primary > .panel-leftheading
{
    color: #fff;
    background-color: #428bca;
    border-color: #428bca;
}

.panel-success > .panel-leftheading
{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.panel-info > .panel-leftheading
{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.panel-warning > .panel-leftheading
{
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.panel-danger > .panel-leftheading
{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.panel-leftheading
{
    width: 42px;
    padding: 10px 15px;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    float: left;
    height: 100%;
    position: absolute;
}

.panel-lefttitle
{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 15px;
    font-size: 16px;
    color: inherit;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    white-space: nowrap;
}

.panel-rightbody
{
    float: left;
    margin-left: 45px;
    padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="page-header">
    </div>
    <div class="row">
    	<div class="col-md-6">

<div class="panel panel-primary">
  <div class="panel-leftheading">
      <h3 class="panel-lefttitle">Panel title</h3>
  </div>
  <div class="panel-rightbody">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      
  </div>
    <div class="clearfix">
    </div>
</div>

    </div>
</div>