CSS / Javascript对齐特定字符的单词 [英] CSS/Javascript to align a word on a specific character

问题描述

我如何使用CSS / Javascript在html中通过任意字符对齐单词，将对齐字符的样式（例如，使其变为粗体）与其他字符进行对比（如本例中所示）对齐和加粗'k'，'e'，'t'和'f'：

  -stack 
 ---溢出
 ----堆栈
 -overflow 
  

编辑：理想情况下，我希望能够以非等宽字体做到这一点。

解决方案

最简单的方法是使用两列表格，其中每行包含一行文本和第二个单元格以包含在文本级容器中的所需字符开始。然后，您只需设置该容器的样式并右对齐第一列。例如：

 < style> 
 .aw {border-collapse：collapse; } / *删除单元格间距* / 
 .aw td {padding：0; } / *删除单元格填充* / 
 .aw td：first-child {text-align：right; } 
 .aw b {font-weight：bold;红色; } 
< / style> 
< table class = aw> 
< tr>< td> stac< td>< b> k< / b> 
< tr>< td> ov< td> b> e< b> rflow> b< b>< td> s< td>< b> ; ack 
< tr>< td> over< td>< b> f< / b>低
< / table> 
  

如果您使用文本级容器（示例中为'b'元素） ：首字母伪元素。但是，如果元素中的第一个字符不是字面上的字母，而是例如一个标点符号或一个数字。

How could I use CSS/Javascript to align a word in html by an arbitrary character in that word, changing the styling of the aligned character (ex. make it bold) to contrast with the other characters, like in this example, aligning and bolding 'k', 'e', 't', and 'f':

-stack
---overflow
----stack
-overflow

edit: Ideally, I'd like to be able to do this in non monospaced fonts.

解决方案

The simplest way is to use a two-column table, where each row contains one line of the text and the second cell starts with the desired character, which is wrapped in a text-level container. Then you just style that container and right-align the first column. Example:

<style>
.aw { border-collapse: collapse; } /* remove cell spacing */
.aw td { padding: 0; }             /* remove cell padding */
.aw td:first-child { text-align: right; }
.aw b { font-weight: bold; color: red; }
</style>
<table class=aw>
<tr><td>stac<td><b>k</b>
<tr><td>ov<td><b>e</b>rflow
<tr><td>s<td><b>t</b>ack
<tr><td>over<td><b>f</b>low
</table>

You can dispense with the text-level containers ('b' elements in the example) if you use the :first-letter pseudo-element. But that pseudo-element does not work consistently if the first character in the element is not literally a letter but e.g. a punctuation mark or a digit.

这篇关于CSS / Javascript对齐特定字符的单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！