介绍一个你可能见过的文本两端布局（也可以叫文本均等分布），如下
说难不难，说简单也不简单。这里盘点了多种实现该布局的方式，看看你都知道哪些吧~
一、加空格
很多人从直觉上会加空格，从视觉上达到文本两端对齐的效果，也是比较符合直觉的，例如像这样
- 技 术 部
- 体验设计部
- 行 政 部
但是直接加空格没啥效果，因为默认情况下空格会合并
如果不想合并，可以用white-space来改变这种行为
li{
white-space: pre;
}这样，无论敲多少个空格，都会原封不动保留下来
这样就得到了一种“近似”的两端对齐效果
除了用white-space改变以外，还可以用来输入“实体”空格
- 技 术 部
- 体验设计部
- 行 政 部
也能得到类似的效果
二、加标签
上面的实现其实只是“近似”的，并不能完美对齐，如下
很明显还是差了点。
不过可以换一种思路，因为空格并不能很好的描述一个中文字符的宽度，无论多少个空格，总是有点差距的，所以这里可以手动加一个空标签
- 技术部
- 体验设计部
- 行政部
然后，我们给这些标签设置一个字符的宽度就好了
li span{
width: 1em;
}这样就能完美对齐了
前面这两种方式其实都不大推荐，局限性太大，需要手动去补全剩余空间，如果字数不一样，又得手动重新计算了。
下面介绍几个实际更推荐的方式
三、justify-content: space-between
很多同学可能都会想到这种方式，毕竟现在flex布局实在太普遍了，不过这只适合具体的元素，不适合存文本，所以需要改造一下，将所有文本拆分成单独的标签，类似这样
- 技术部
- 体验设计部
- 行政部
这么多标签，手写太麻烦了，可以在 JS自动生成
txt.split('').map(el => `${el}`).join('')然后直接利用flex布局的两端对齐就可以了
li{
display: flex;
justify-content: space-between;
}效果如下
而且这种适应性更好，改变外层宽度，也能做到两端对齐
四、flex:1
利用flex布局，还可以用另一种方式来实现。
我们可以在每个字符中间都添加一个空标签，然后让这些空标签自动分配剩余空间，这样不就实现文本两端对齐了吗？
- 技术部
- 体验设计部
- 行政部
同样可以用JS来生成，相比上一种方式更容易
txt.split('').join('')然后设置flex:1
li{
display: flex;
}
li span{
flex: 1;
}效果如下
这两种方式适应性更好，基本可以在实际生产使用了，不过需要对HTML进行改造，稍微麻烦点，而且看着不够干净，毕竟都是空标签，没有实际价值。
下面再介绍两个不需要改变HTML的方式
五、text-align: justify
文本对齐方式中天然就有一个两端对齐的方式，叫做justify，但是这种方式不包括最后一行
由于不支持最后一行，所以对于单行文本，这种对齐方式自然也就失效了。
既然不支持单行文本，我们可以手动让“单行”变成“多行”，具体做法其实也很简单，用一个伪元素，强制换行就可以了，具体实现如下
li::after{
content: '';
display: inline-block;
width: 100%;
}这样在设置text-align: justify时，原本的第一行就不再是最后一行了，自然也就生效了
li{
text-align: justify;
}效果如下
不过由于换行的关系，导致整体高度要比以前高出一部分，所以这种方式需要手动限制一个高度
li{
text-align: justify;
height: 24px;
line-height: 24px;
}这样就完美实现了。
另外，在 MDN文档上还看到这样一个属性值justify-all，可以满足我们的需求
不过现在还没有任何浏览器支持
六、text-align-last: justify
CSS中还有一个专门适用于最后一行文本的对齐方式，叫做text-align-last，刚好可以满足这个场景。所以我们可以在HTML不做任何修改的情况下，设置最后一行文本两端对齐就可以了
li{
text-align-last: justify;
}效果如下
这应该是最完美的方式了，不过兼容性稍微差点，又是Safari脱了后腿
七、SVG 中的lengthAdjust
除了以上CSS的各种方式外，SVG中也可以实现类似这样的文本两端对齐，需要用到lengthAdjust属性。
这个属性有两个值，一个是spacing，表示剩余空间自动填充，另一个是spacingAndGlyphs，表示会让字符自动压缩或拉伸来适配整个文本长度（textLength）
效果如下
我们也可以用这种对齐方式来实现我们想要的效果
八、总结和说明
以上共介绍了7种方式来实现文本两端对齐，完整 demo 可以查看以下链接
除此之外，你还知道哪些方式呢？欢迎留言讨论，下面总结一下
加空格的方式比较符合直觉，但是只能达到近似的对齐效果加标签可以实现精准对齐，但是是纯手动，而且和文字字数也有关系flex布局的两端对齐需要给每个文字套上一个标签也可以在每个文字之间加上一个空标签，设置自动填充text-align: justify可以实现文本两端对齐，但是不包括最后一行借助伪元素换行，可以手动将原本的最后一行变成非最后一行text-align-last: justify可以最完美的实现这个效果，不过兼容性欠佳SVG中的lengthAdjust也能实现类似的对齐效果
资讯一下，如果面试（5年内）出这样一道题，你们觉得难吗？最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发 ❤❤❤
html点击复制邀请码代码,JS复制对应id的内容到粘贴板（Ctrl+C效果）
前言
最近在做一个按钮，实现的效果是当点击后复制url到黏贴板，但不是当前页面url，而是对应一个元素的url，且一个页面会有多个url。一开始找到一个方法，但是竟然只兼容IE浏览器，神奇了，竟然有只兼容IE的东西。后来发现一个zeroclipboard.js这个插件，但是怎么也搞不出那个效果，有点麻烦。
最后翻到了一个js封装好的方法，有效！
想要实现的一个效果是，下面html代码：
复制文件链接
点击复制文件链接这个按钮，复制input框里的value值，是传进去的一个url；首先点击a标签会触发getUrl这个函数；传进去id用于找到对应的input然后取值(因为遍历了多个td，有许多个input框一一对应去取)。
下面js代码：
getUrl中调用了封装好的copyToClipboard方法实现了功能。有一点的是html中input的样式用style="margin-left: -9999px"进行隐藏，因为不知道为什么用type="hiden"或者display="none"去隐藏都只会获取源代码而不是动态的url遍历出来的值。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
