防止< code>中的自动换行符标签 [英] Prevent automatic line breaks in a <code> tag

查看:126
本文介绍了防止< code>中的自动换行符标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个html 代码标签,包装在宽度固定的 pre 标签中,自动变得越来越难看换行符:





我想要实现的是,文本不会自动在空格上打破,但是当我添加一个 white-space:nowrap 代码元素,整个事物折叠成一行,所以\ n和\ r字符也被忽略:





有没有人有一个想法,如何防止自动换行符,但保持预定的行断??解决方案

问题是由twitter引导引起的。
无论出于何种原因,他们将以下样式添加到代码标记中:

  white-space:pre; 
空格:预包装;
word-break:打破所有;
word-wrap:打破单词;

通过覆盖样式:

  white-space:pre; 
word-break:正常;
word-wrap:正常;

问题已解决。

I have a html code tag, wrapped in in a pre tag with fixed width and am getting ugly automatic line breaks:

What I want to achieve is, that the text is NOT automatically broken on spaces, but when I add a white-space: nowrap to the code element, the whole thing collapses to a single line, so all \n and \r characters are ignored as well:

Does anyone have an idea how to prevent automatic line breaks, but keep the intended line breaks?

解决方案

The problem was caused by twitter bootstrap. For whatever reason, they added the following styles to the code tag:

white-space:pre;
white-space:pre-wrap;
word-break:break-all;
word-wrap:break-word;

By overwriting the styles with:

white-space: pre;
word-break: normal;
word-wrap: normal;

The problem was fixed.

这篇关于防止< code>中的自动换行符标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆