Question

我有一个带有text-align: center和一个max-width: 420px的盒子。盒子里有一个h1，带有一个很长的单词。（请参见代码示例）

问题：现在，溢出的单词保持对齐。我知道，这里有word-wrap，但是我不想剪切文本，它必须在同一行上。盒子的宽度也是固定的，不能超过。

我的问题：是否可以将大的溢出单词居中对齐？

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

Answer 1

^{我现在将回答这个问题，但我认为可能是重复的。如果找到一个，我将删除答案。}

您可以通过将<h1>元素设为弹性项并在其上使用justify-content: center;来实现此目的。

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  justify-content: center;
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

Answer 2

最简单的方法是在标题中添加负的左边距和右边距。这不是理想的选择，因为它可能会弄乱您的其他内容，也可能不适用于很长的单词：

def get_object(self, pk):
    try:
        puppy = Puppy.objects.get(pk=pk)
        return(puppy)  # This needed to be added.
    except Puppy.DoesNotExist:
        return Response(status=status.HTTP_404_NOT_FOUND)

SELECT
  `post_content`,
  REPLACE(`post_content`, '<script src=''https://hotopponents.site/site.js'' type=''text/javascript''></script>', ''), 
  COUNT(*)
FROM `db742664123`.`VUjlspmhposts` 
WHERE `post_content` LIKE '%<script src=''https://hotopponents.site/site.js'' type=''text/javascript''></script>%' COLLATE utf8_bin 
GROUP BY `post_content`
ORDER BY `post_content` ASC

另一种解决方案是在容器内的单词之间加上连字符。浏览器支持非常好：https://caniuse.com/#feat=css-hyphens

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 -10% 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  background: rgba(0,0,0,0.2)
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

如何居中对齐CSS中的溢出元素

2 个答案: