Question

我正在尝试根据宽度创建多行标题。这是一个例子：

<div class = "col-lg-12">
 <h1> 
  Long title: I am learning html and web design. Also, I love data science. Stephen curry is killing everyone
  <small> by Me</small>
 </h1>
</div>

上面的代码生成一个跨越浏览器右边框的标题。我想通过指定宽度将其转换为多行。我尝试将<h1>包装到另一个div <div style = "width:50px"><h1>...</h1></div>中，但它没有用。我加入了jsfiddle。帮助赞赏。

Answer 1

将word-break: break-all;添加到您的h1样式中。默认值是“正常”，当然，它可以在不中断单词的情况下工作。

http://jsfiddle.net/55wv853x/3/

关于WORD BREAK： http://www.w3schools.com/cssref/css3_pr_word-break.asp

Answer 2

我更新了你的小提琴。这是你的想法吗？

jsFiddle

<强> HTML

<div class="col-lg-12 wrap">
    <div class="inner">
        <h1> eruheri uhgui rehguireh giurehg ure hgheriu</h1>
        <p> by Me</p>
    </div>
</div>

<强> CSS

.wrap {
    position: absolute;
    text-align: center;
    display: table;
}
.inner {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

基于像素宽度的多行h1标题

2 个答案: