如何删除对齐CSS中的空白

问题描述 投票:0回答:3

如果我正在使用

text-align:justify

段落显示单词之间不需要的空格以保持指定的宽度。在互联网上搜索但没有得到任何正确的结果。我也使用了white-space但没有用

小提琴:小提琴

html css whitespace
3个回答
15
投票

最接近的解决方案是使用

word-break: break-all
但这也会破坏单词。如果您对此感到满意,请采用此解决方案:

.sample_test p{
    word-break: break-all;
}

小提琴

编辑(2021 年 11 月)

其他最接近的更好的解决方案是使用

hyphens: auto
。我们必须向 HTML 元素提及全局属性
lang
才能实现此功能:

.sample_test {
  display: block;
  margin: 0 auto;
  width: 400px;
  height: auto;
}

.sample_test p {
  /* word-break: break-all; */
  hyphens: auto;
}
<div class="sample_test" lang="en">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.</p>
  <p>Contrary to popular belief,.. It has roots in a piece of classical Latin literature from 45 BC,</p>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary
    of over 200 Latin words,</p>
</div>


2
投票

当您使用

text-align: justify
时,您是在“要求”浏览器添加间距,而浏览器会将其实现为在单词之间添加间距。根据 CSS Text Module Level 3 LC,您还可以使用 text-justify: distribute
 来要求浏览器在单词之间和单词中的字符之间使用添加的间距,以达到更平衡的结果,但结果是否真的是有争议的更好,而且这个功能只在 IE 中实现(很久以前)。
您可以使用连字符来改善这种情况。

这通常会减少添加间距的需要,但当然它不能删除它。最有效的方法是使用

Hyphenator.js,这意味着您需要声明页面的语言,例如<html lang=en>,在文本应连字符的任何元素上设置 hyphenate

 类,例如用 
<body class=hyphenate>
 连接所有内容,然后添加代码
<script src=http://hyphenator.googlecode.com/svn/tags/Version%204.2.0/Hyphenator.js></script>
<script>Hyphenator.run();</script>

这很有帮助

0
投票
但是连字符不起作用

© www.soinside.com 2019 - 2024. All rights reserved.