Question

我有一个标准的响应标题（打破多行）：

<h1>This is my beautiful 
    title!</h1>

我还定义了一个（多行）省略号（这是我知道的webkit特定但也可以，因为我只需要iOS / Android）所以像这样：

h1 {
    font-size: 18px;
    line-height: 1.8em;
    height: 3.6em;

    position: relative; 
    display: block; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;           
    overflow: hidden;   
}

我想要做的是让我的（多线）标题的第一行具有不同的宽度 - 以实现更加视觉上平衡的标题。但我无法添加新的标记，标题当然是动态/不同的。我正在寻找一个只有CSS的解决方案（没有JS）。

简单问题 - 如何使多行文字中的第1行变窄，但同时保留省略号。

这样标题看起来就像：

<h1>This is my 
    beautiful title!</h1>

解决方案1  - 我找到了一种方法，通过在文本的第一行使用右浮动的伪元素来实现这一点 - 如下所示：

h1:before { 
    content: "";
    float: right;
    width: 30%;
    height: 1em;
}

问题1 - 浮动元素在flexbox容器中不起作用，-webkit-box仍然是一个flexbox容器。我需要它来使省略号工作。关于如何＆＃34;漂浮＆＃34;的任何想法一个右边的框并在其周围包裹文本而不实际使用浮动？

解决方案2 - 通过更改文本布局方向和文本缩进，我找到了一种聪明的方法 - 所以类似于：

h1 {    
    direction: rtl;
    text-indent: 30%;
    text-align: left;
}

问题2 - 看起来很干净 - 只要你没有尾随撇号，冒号和类似的东西 - 因为RTL会将他们的位置改为句子的开头（并且我无法在H1中添加额外的标记或字符 - 仅可能在外面... ..所以应用此标题我的标题现在看起来像

<h1>!This is my 
    beautiful title</h1>

有关更多黑客的任何想法可以纠正问题1或2？感觉就像我离得那么近，但同时又遥远。

编辑：问题示例 - https://codepen.io/anon/pen/bYqZQP

以（多行）文本不同地调整第一行的大小+截断它

0 个答案: