文章/答案/技术大牛

发布

css不换行代码

CSS不换行代码

基础概念

CSS中的white-space属性用于设置元素内的空白符处理方式。当设置为nowrap时，文本不会换行，而是在同一行上继续显示，直到遇到<br>标签为止。

类型

normal：默认值，空白符会被浏览器忽略。
nowrap：文本不会换行，所有文本都在一行内显示。
pre：空白符会被浏览器保留，类似于HTML的<pre>标签。
pre-wrap：保留空白符序列，但是文本会换行。
pre-line：合并空白符序列，但是文本会换行。

应用场景

导航栏：在导航栏中，通常希望链接在一行内显示，不换行。
标题：某些标题可能很长，但希望它们在一行内显示，以保持页面的美观。
工具提示：在工具提示中，通常希望文本不换行，以便用户可以一次性看到所有信息。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS No Wrap Example</title>
    <style>
        .nowrap {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <h1 class="nowrap">这是一个非常长的标题，我们希望它不换行显示</h1>
    <nav class="nowrap">
        <a href="#">链接1</a> |
        <a href="#">链接2</a> |
        <a href="#">链接3</a> |
        <a href="#">链接4</a>
    </nav>
</body>
</html>

参考链接

MDN Web Docs - white-space

遇到的问题及解决方法

问题：文本在一行内显示，但超出了容器宽度，导致溢出

原因：当文本内容过长且设置了white-space: nowrap时，文本会超出容器的宽度。

解决方法：

使用overflow属性：设置overflow: hidden或overflow: auto来隐藏或显示滚动条。
使用text-overflow属性：结合white-space和overflow，使用text-overflow: ellipsis来显示省略号。

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

参考链接

通过以上方法，可以有效地控制文本的换行和溢出问题。

页面内容是否对你有帮助？

有帮助

没帮助

如何让td (单元格)从html表格扩展到一行？

html、html-table、tablerow

在一些html单元(td)中，文本被换行，因为列的大小小于单元上的文本的大小。我不希望文本被换行，我希望列宽扩大，这样换行就不会发生！我该怎么做呢？最后一点，我只能使用html代码，不能使用css :(

浏览 1提问于2012-06-02得票数 7

回答已采纳

2回答

在TEXTAREA中输入文本，同时保持格式(就像PRE标签中的文本一样)

textarea、css

当我输入包含换行符和长句的文本时，我不希望看到换行或不包含换行符的版本。实现这一点的CSS样式是什么？到目前为止，我尝试了white-space属性，但没有一个能给出我想要的结果。

浏览 0提问于2010-12-02得票数 0

回答已采纳

1回答

Roslyn VisitArgumentList和VisitArgument如何获取逗号琐事？

vb.net、dictionary、roslyn

有没有办法访问逗号，然后重新创建列表而不丢失换行符。(x, z)Public Overrides Function VisitArgumentList(ByVal node As CSS.ArgumentListSyntax[Select](Function(a As CSS.ArgumentSyntax) CType(a.Accept(Me), ArgumentSyntax)))) End Function

浏览 2提问于2018-01-29得票数 2

2回答

仅在文本的换行部分应用css

html、css

当文本的高度大于图像时，文本将向左换行。我想在图像和包装文本之间添加一些填充。我可以向图像添加底部填充，但我不希望在文本未换行时显示填充。下面是当文本没有换行时组件应该是什么样子。图像不应该有底部填充：下面是文本换行时的外观。图像和换行文本之间应该有一些填充：有没有办法通过css做到这一点？

浏览 2提问于2020-11-03得票数 1

4回答

换行符(如<br>)仅使用css

html、css、styling

在纯css中，也就是不添加额外的html标签，可以像<br>一样换行吗？我想要在<h4>元素之后换行，但不是在前面：<li>CSS display: inline;我发现了许多这样的问题，但总是有像"use display: block;“这样的答案，当<h4>必须保持在同一行时，我不能这样做

浏览 86提问于2012-06-07得票数 89

回答已采纳

3回答

为什么str_replace不替换这个字符串呢？

php、mysql、css、str-replace

我有下面的PHP代码，它应该加载数据从CSS文件到一个变量，搜索旧的身体背景颜色，取代它的颜色从提交的表单，重新保存CSS文件，最后更新数据库中的颜色。"; }";file_put_contents('..> 下面是我的CSS (存储在“default.css</

浏览 0提问于2012-12-17得票数 1

回答已采纳

2回答

在HTML文本区域中禁用换行符

html、css、textarea、newline

使用CSS或任何其他方式，是否可以禁止HTML文本区域中的换行符？因此，基本上我不希望用户按下"enter“时发生任何事情。

浏览 0提问于2011-01-11得票数 13

回答已采纳

2回答

IE6/7逐字解释列表项中的空格

html、internet-explorer、html-lists

如何让Internet Explorer6和7不直接解释HTML列表项中的空格和换行符？在下图中，我用红色标记了不需要的空格。我不想把所有的东西都塞进一行代码中。这是很难理解的。有没有CSS的替代方案？

浏览 1提问于2010-09-30得票数 0

回答已采纳

1回答

基于像素在python中格式化字符串

python

我正在用python读取一个xml文件，然后在web gui上显示它，读取代码非常简单。= "sample.xml" contents = contents.decode('utf-8')但是..。为了显示它..我希望每行不超过比如200px?？如何在python中做到这一点..

浏览 5提问于2013-02-08得票数 1

回答已采纳

1回答

虽然innerHTML没有显式的新行、制表符或<br> <p>，但innerText有新行

javascript、html、css

我的目标是给每个字符一个不同的css特征，但它仍然保持其作为一个单词的形式，使用chrome扩展。Art info 使用chrome扩展，我用span包装了每个字符。

浏览 0提问于2021-04-02得票数 0

1回答

如何删除lodash模板创建的换行符？

javascript、webpack、lodash

我正在从lodash模板渲染HTML (使用webpack)，但是lodash模板正在创建新的换行符。美化HTML不会有什么帮助，因为这些行不是“错误”。我使用的是： <!在HTML <link>的上方和下方换行 <!" /> 这就是我想要的，上面和下面没有任何换行符： <!" /> 有一个hack可以像这样在一行中做所有的事情，但是这会变得丑陋，因为代码太长了。/theme.css" /&g

浏览 56提问于2019-01-15得票数 0

2回答

CPP:转义宏标识符

c++、macros

我想附加一些web代码(html，css.)具有可读的宏名称。条件css文件示例：some rootcode /* height 480 */ line-height:23px;/* height < 480 */ line-height:46px;对…的调用 cpp -P -D height=480 -oout.

浏览 2提问于2011-12-01得票数 4

回答已采纳

2回答

在图像下面添加文本，输出取决于输入语言吗？

php、html、image、css

这是我的CSS代码：<!>这真的很有趣，因为CSS代码要么“工作”，要么“不工作”，它不应该选择性地在一种语言上工作而不是在另一种语言上工作。进一步的测试表明，只要我对.figure标

浏览 0提问于2017-04-15得票数 2

1回答

隐藏超出TD宽度的文本

html、css

尽管设置了TD的宽度，并将以下css应用于TD，但我的文本超出了TD的宽度(我不希望文本换行)，而我希望隐藏超出TD宽度的任何内容。下面是我目前使用的CSS： td { overflow:hidden; white-space:nowrap; width:100px !important; }

浏览 3提问于2011-09-07得票数 0

回答已采纳

2回答

骑手-环绕长线

rider

我看到有一个在编写代码时换行的选项(设置通用代码样式->硬换行)，但我想让骑手在显示带有很长代码的代码时只在视觉上换行，而不增加新的空格-就像VisualStudio setting Text Editor

浏览 2提问于2019-08-30得票数 4

1回答

PHP奇怪的回波行为

php、css、echo

php我仍然可以修复css并使用第一种语法，但是我很想知道是什么导致了这个问题！回答：感谢布拉德肯特，添加断线回显修复了问题！！

浏览 2提问于2015-10-26得票数 2

回答已采纳

1回答

动态多列布局

javascript、jquery、css

我想使用CSS或JavaScript创建多个列，允许图像重叠列，然后在不牺牲列完整性的情况下围绕它们进行自动换行。我发现masonry.js可以做其中的一部分，但不是我需要的全部。

浏览 2提问于2012-01-29得票数 0

17回答

两行上的文本溢出省略号

html、css

我知道您可以使用CSS规则的组合来使文本以省略号(...)结尾。当它溢出的时候(超出了父母的界限)。。但是，仍然有足够的空间让文本在第二行换行并继续。这被white-space: nowrap中断，这是省略号工作所必需的。附注:没有JS解决方案，如果可能的话，使用纯CSS。

浏览 6提问于2013-04-10得票数 167

回答已采纳

1回答

如何在datatable中创建可水平滚动的单元格

css、jsf-2、primefaces

我有一个datatable列，其中的条目是自动换行的，因为内容可能会很长。为了使显示更具可读性，我不希望内容被换行，而是提供水平滚动来查看默认情况下没有出现的任何内容。我确信这是一个简单的CSS修改，但我的熟练程度非常低。

浏览 0提问于2012-11-23得票数 6

回答已采纳

2回答

在php中如何在某个单词长度后换行

php、javascript、codeigniter

我使用了css属性'break all‘，但它在某些版本的mozila中不起作用。我使用了固定宽度和许多html css属性，但在旧版本的mozila中它运行得不好。

浏览 2提问于2012-11-20得票数 0

点击加载更多

css不换行代码