Question

在中间（或在特定数量的字符或音节之后）分割单词并将“单词部分”与行连接起来的最佳方法是什么。基本上想象一个非常长的灵活下划线。

目标是让“word___part”始终为父容器的100％。这意味着在缩小或缩小浏览器窗口时它应该完全响应。

    span:first-child {
    	float:left;
    	display:inline-block;
    }
    
    span.underscore {
    
    }
    
    span:last-child {
    	float:right;
    	display:inline-block;
    }

    <span>Auto</span><span class="underscore"></span><span>mation</span>

你会怎么做？ Flexbox的？

此外，元目标甚至可以设置用动态cms拆分的单词。意思是“自动化”这个词来自后端。

Answer 1

您可以在第一个:after元素上使用span伪元素，并将align-items: flex-end;设置为在跨距底部对齐线。

div {
  width: 70%;
  display: flex;
}
span:first-child {
  display: flex;
  align-items: flex-end;
  flex: 1;
}
span:first-child:after {
  content: '';
  height: 1px;
  background: black;
  flex: 1;
}

<div>
  <span>Auto</span><span>mation</span>
</div>

<div>
  <span>Lorem ipsum dolor </span><span>sit.</span>
</div>

您还可以使用js将字符串拆分为特定单词，并将每个部分包装在span个元素中。

function modify(selector, word) {
  var el = document.querySelector(selector);
  var text = el.textContent;
  var i = text.indexOf(word)

  if (i != -1) {
    var arr = [text.substring(0, i), text.substring(i)]
    el.innerHTML = arr.map(e => '<span>' + e + '</span>').join('');
  }
}

modify('.e1', 'mation')
modify('.e2', 'sit')

div {
  width: 70%;
  display: flex;
}
span:first-child {
  display: flex;
  align-items: flex-end;
  flex: 1;
}
span:first-child:after {
  content: '';
  height: 1px;
  background: black;
  flex: 1;
}

<div class="e1">Automation</div>
<div class="e2">Lorem ipsum dolor sit.</div>

Answer 2

将border-bottom与.underscore一起应用于flex-grow: 1，然后调整高度和边距以适应。

.wrapper {
  display: flex;
}

span.underscore {
  border-bottom: 2px solid black;
  flex-grow: 1;
  height: 0.5em;
  margin: 0 5px;
}

<div class="wrapper">
  <span>Auto</span><span class="underscore"></span><span>mation</span>
</div>

您甚至可以使用dotted边框代替solid来模拟省略号。

Answer 3

一种非常简单的方式：

<div>
  <span class="left">Auto</span>
  <span class="underscore"></span>
  <span class="right">mation</span>
</div>

div {
  display: flex;
}

.underscore {
  width: 100%;
  border-bottom: 1px solid #000;
  margin: 0 5px;
}

https://codepen.io/anon/pen/XaddqO

Answer 4

如果文本元素后面的background-color是纯色：

在父级上使用background-image创建linear-gradient()。
覆盖子元素上的background-color。

工作演示：

＆＃13;

.text {
  background: linear-gradient(to top, transparent 5px, black 5px,
                                      black 7px, transparent 7px);
  justify-content: space-between;
  display: flex;
}

.text span {
  background: #fff;
  padding: 0 5px;
}

＆＃13;

<div class="text">
  <span>Auto</span>
  <span>mation</span>
</div>

＆＃13;

Answer 5

答案很好，但你说 此外，元目标甚至可以设置用动态cms拆分的单词。含义＆＃34;自动化＆＃34;来自后端。 因此，yiu可以使用getword（）方法从后端获取单词并使用javascript将其分为两个

您可以尝试运行代码段并查看输出。然后更改getword（）方法返回的字符串并再次运行。

＆＃13;

 var container = document.getElementById('slit-container');
 var word = getWord();
 var wordPartOne = word.substring(0, 4);
 var wordPartTwo = word.substring(4, word.lenght);
 var data = "<span>"+wordPartOne+"</span> <span>"+wordPartTwo+"</span>";
 container.innerHTML = data;

 function getWord(){
   //Query your backend to get the word
   //for test purpose I will just return a string

   return "Automation"
 }

＆＃13;

div {
  width: 70%;
  display: flex;
}
span:first-child {
  display: flex;
  align-items: flex-end;
  flex: 1;
}
span:first-child:after {
  content: '';
  height: 1px;
  background: black;
  flex: 1;
}

＆＃13;

<div id="slit-container">

</div>

＆＃13;

CSS / JS：在响应式设计中使用水平线分割单词

5 个答案: