Question

.logo {
    display: block;
    width: 200px;
    height: 100px;
    margin: auto;
    text-indent: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #F44336;
    }

<h1 class="logo">This is a title </h1>

screenshot

如果我为text-indent（text-indent: 999px;）分配了一个非常大的数字，则只隐藏第一个单词。在这种情况下，应隐藏所有单词，因为The text-indent property specifies the indentation of the first line in a text-block.

我不想隐藏所有文字。我知道text-indent-image-replacement方法。我只是好奇为什么代码不能正常工作。

Answer 1

您可以将负值添加到function addPrice(){ var add = $('.range').append("<div class='row'><div class='col-md-12'><div class='form-group'><label class='linput' for='prices'> Price</label><input type='text' class='form-control' id='prices' name='prices' placeholder='Price'></div><div class='form-group'><label class='linput' for='minP'> Min</label><input type='number' class='form-control' id='minP' name='min' placeholder='Min'></div><div class='form-group'><label class='linput' for='maxP'> Max</label><input type='number' class='form-control' id='maxP' name="max" placeholder='Max'></div> </div></div><hr>"); }以隐藏所有文字

Like this

text-indent

Answer 2

.logo {
  display: block;
  width: 200px;
  height: 100px;
  margin: auto;
  text-indent: 999px;
  font-size: 14px;
  font-weight: 500;
  color: blue;
  background: red;
  white-space: nowrap;
  overflow: hidden;
}

<h1 class="logo">This is a title </h1>

文本缩进将更多像素添加到行的开头，将文本包装到下一行，这就是您的情况。它将文本推送到999px。在此之后，您看到的文本实际上被推到了行。

如果你想让它移出屏幕，请使用负缩进，这将开始左边大量像素的行，文本神奇地消失，因为它向左开始那么多像素并且必须旅行在撞到右侧边缘之前必须先断开到下一行才能这么做。

您还可以禁用css隐藏的文本+溢出包装以获得所需的效果。

Answer 3

这是因为您的div宽度为200px。压痕不会制动，直到找到第一个空格，字符串被视为一个长字。文本的其余部分出现在框中 - 在第二行。

您可以通过添加white-space：nowrap来证明我是正确的，因此文本不会中断。

Answer 4

我发现，如果正确使用html元素的css'text-align'，则text-indent无法正常工作

text-align:unset;

Answer 5

我认为是因为在小提琴中你放了父母

＆＃13;

.parent-dev h1{
    text-indent:-999999em;
    background:url('images/thing.png');
}

＆＃13;

<div class="parent-dev">
<h1>Look at me, I am text.Look at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am tex</h1>
</div>

＆＃13;

Answer 6

所有单词都应隐藏

使用150px，你应该明白为什么只隐藏第一个单词。

在999px时，第一行是缩进的，你看到的是第二行。

为什么CSS文本缩进不起作用？

6 个答案: