Question

我有一个div，其中包含输入（复选框）和标签的列表。

有些标签是很长的单词或句子，我想将div调整为内容的长度。

此刻，如果单词太长，它的一部分将移至下一行（将创建新的li元素，如第二个屏幕截图中所示，第二个标签现在位于第二个和第三个标签上行），我想找到这样的CSS规则，该规则允许更改（以适应）div的大小，因此单词（输入标签）停留在一行上。

是否可以借助CSS来实现？

Answer 1

借助CSS，您可以打断单词并移至下一行word-break: break-all，检查下面的示例，

div {
  width: 100px;
  border: 1px solid black;
}

.word {
  word-break: break-all;
}

<h2>normal (default):</h2>
<div>Thisissomeveryveryverylongandwillfitinsideddiv word. Words will break according to usual rules.</div>
<h2>word-break</h2>
<div class="word">Thisissomeveryveryverylongandwillfitinsideddiv word. This text will break at any character.</div>

Answer 2

您可以在CSS中使用连字符属性：

/* Just a test, you can rename class */
div.container {
    width: 100px;
    border: #000 1px solid;
    color: #000;
}

/* Breaking-words with line-wrapping at &shy or &hyphens */
.hyphensM {
    -moz-hyphens: manual;
	-ms-hyphens: manual;
	-webkit-hyphens: manual;
	hyphens: manual
}

/* Breaking-words, no line-wrapping. Depends on the language used <html lang="...">*/
.hyphensA {
    -moz-hyphens: auto;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto
}

/* None, no breaking-words and line-wrapping */
.hyphensN {
    -moz-hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none
}

<div class="container" lang="en">
    <p class="hyphensM">Thisisaveryveryveryveryveryvery&shylooooooooooooooooooooooongsentence.</p>
    <p class="hyphensA">Thisisaveryveryveryveryveryverylooooooooooooooooooooooongsentence.</p>
    <p class="hyphensN">Thisisaveryveryveryveryveryverylooooooooooooooooooooooongsentence.</p>
</div>

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Answer 3

您可以使用滚动条功能将所有内容保持在一行中

#div{
    overflow-x: scroll;
{

此属性将x滚动条添加到div或使用overflow-x: hidden;隐藏内容

调整div宽度以适应CSS

3 个答案: