支持的 HTML 子集

Qt 的文本 Widget 能够显示富文本,使用指定子集 HTML 4 标记。Widget 使用 QTextDocument ,譬如 QLabel and QTextEdit ,能够显示以此方式指定的富文本。

在文本 Widget 中使用 HTML 标记

Widgets automatically detect HTML markup and display rich text accordingly. For example, setting a label's text property with the string "<b>Hello</b> <i>Qt!</i>" will result in the label displaying text like this: Hello Qt!

When HTML markup is used for text, Qt follows the rules defined by the HTML 4 specification. This includes default properties for text layout, such as the direction of the text flow (left-to-right) which can be changed by applying the dir attribute to blocks of text.

支持的 Tag

下表列出的 HTML 标签支持通过 Qt 的 富文本 引擎:

Tag 描述 注释
a 锚点或链接 支持 href and 名称 属性。
address 地址
b Bold
big Larger font
blockquote Indented paragraph
body Document body 支持 bgcolor attribute, which can be a Qt 颜色名称 #RRGGBB color specification.
br Line break
center Centered paragraph
cite Inline citation 如同 i .
code Code 如同 tt .
dd Definition data
dfn 定义 如同 i .
div Document division 支持标准 块属性 .
dl Definition list 支持标准 块属性 .
dt Definition term 支持标准 块属性 .
em Emphasized 如同 i .
font Font size, family, and/or color 支持下列属性: size , face ,和 color (Qt color names or #RRGGBB ).
h1 Level 1 heading 支持标准 块属性 .
h2 Level 2 heading 支持标准 块属性 .
h3 Level 3 heading 支持标准 块属性 .
h4 Level 4 heading 支持标准 块属性 .
h5 Level 5 heading 支持标准 块属性 .
h6 Level 6 heading 支持标准 块属性 .
head 文档 Header (头)
hr Horizontal line 支持 width attribute, which can be specified as an absolute or relative ( % ) 值。
html HTML 文档
i Italic
img 图像 支持 src , source (for Qt 3 compatibility), width ,和 height 属性。
kbd User-entered text
meta Meta-information If a text encoding is specified using the meta tag, it is picked up by Qt::codecForHtml(). Likewise, if an encoding is specified to QTextDocument::toHtml (), the encoding is stored using a meta tag, for example: <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
li List item
nobr Non-breakable text
ol Ordered list 支持标准 列表属性 .
p Paragraph Left-aligned by default. Supports the standard 块属性 .
pre Preformated text
qt Qt rich-text document 同义词 html . Provided for compatibility with earlier versions of Qt.
s Strikethrough
samp Sample code 如同 tt .
small Small font
span Grouped elements
strong Strong 如同 b .
sub Subscript
sup Superscript
table Table 支持下列属性: border , bgcolor (Qt color names or #RRGGBB ), cellspacing , cellpadding , width (absolute or relative), and height .
tbody 表格本体 什么都不做。
td 表数据单元格 支持标准 表单元格属性 .
tfoot Table footer 什么都不做。
th Table header cell 支持标准 表单元格属性 .
thead Table header thead tag is specified, it is used when printing tables that span multiple pages.
title 文档标题 The value specified using the title tag is available through QTextDocument::metaInformation ().
tr 表格行 支持 bgcolor attribute, which can be a Qt 颜色名称 #RRGGBB color specification.
tt Typewrite font
u Underlined
ul Unordered list 支持标准 列表属性 .
var 变量 如同 i .

块属性

The following attributes are supported by the div , dl , dt , h1 , h2 , h3 , h4 , h5 , h6 , p tags:

  • align ( left , right , center , justify )
  • dir ( ltr , rtl )

列表属性

The following attribute is supported by the ol and ul tags:

  • type ( 1 , a , A , square , disc , circle )

表单元格属性

The following attributes are supported by the td and th tags:

  • width (absolute, relative, or no-value)
  • bgcolor (Qt color names or #RRGGBB )
  • colspan
  • rowspan
  • align ( left , right , center , justify )
  • valign ( top , middle , bottom )

CSS 特性

The following table lists the CSS properties supported by Qt's 富文本 引擎:

特性 描述
background-color <color> Background color for elements
background-image <uri> Background image for elements
color <color> Text foreground color
font-family <family name> Font family name
font-size [ small | medium | large | x-large | xx-large ] | <size>pt | <size>px Font size relative to the document font, or specified in points or pixels
font-style [ normal | italic | oblique ]
font-weight [ normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ] Specifies the font weight used for text, where normal and bold are mapped to the corresponding QFont weights. Numeric values are 8 times the equivalent QFont weight values.
text-decoration none | [ underline || overline || line-through ] 额外文本效果
font [ [ <'font-style'> || <'font-weight'> ]? <'font-size'> <'font-family'> ] Font shorthand property
text-indent <length>px First line text indentation in pixels
white-space normal | pre | nowrap | pre-wrap Declares how whitespace in HTML is handled.
margin-top <length>px Top paragraph margin in pixels
margin-bottom <length>px Bottom paragraph margin in pixels
margin-left <length>px Left paragraph margin in pixels
margin-right <length>px Right paragraph margin in pixels
padding-top <length>px Top table cell padding in pixels
padding-bottom <length>px Bottom table cell padding in pixels
padding-left <length>px Left table cell padding in pixels
padding-right <length>px Right table cell padding in pixels
padding <length>px Shorthand for setting all the padding properties at once.
vertical-align baseline | sub | super | middle | top | bottom Vertical text alignment. For vertical alignment in text table cells only middle, top, and bottom apply.
border-collapse collapse | separate Border Collapse mode for text tables. If set to collapse, cell-spacing will not be applied.
border-color <color> Border color for text tables and table cells.
border-top-color <color> Top border color for table cells.
border-bottom-color <color> Bottom border color for table cells.
border-left-color <color> Left border color for table cells.
border-right-color <color> Right border color for table cells.
border-style none | dotted | dashed | dot-dash | dot-dot-dash | solid | double | groove | ridge | inset | outset Border style for text tables and table cells.
border-top-style <border-style> Top border style for table cells.
border-bottom-style <border-style> Bottom border style for table cells.
border-left-style <border-style> Left border style for table cells.
border-right-style <border-style> Right border style for table cells.
border-width <width>px Width of table or cell border
border-top-width <length>px Top border width for table cells.
border-bottom-width <length>px Bottom border width for table cells.
border-left-width <length>px Left border width for table cells.
border-right-width <length>px Right border width for table cells.
border-top <width>px <border-style> <border-color> Shorthand for setting top border width, style and color
border-bottom <width>px <border-style> <border-color> Shorthand for setting bottom border width, style and color
border-left <width>px <border-style> <border-color> Shorthand for setting left border width, style and color
border-right <width>px <border-style> <border-color> Shorthand for setting right border width, style and color
border-top <width>px <border-style> <border-color> Shorthand for setting top border width, style and color
border-bottom <width>px <border-style> <border-color> Shorthand for setting bottom border width, style and color
border <width>px <border-style> <border-color> Shorthand for setting all four border's width, style and color
background [ <'background-color'> || <'background-image'> ] Background shorthand property
page-break-before [ auto | always ] Make it possible to enforce a page break before the paragraph/table
page-break-after [ auto | always ] Make it possible to enforce a page break after the paragraph/table
float [ left | right | none ] Specifies where an image or a text will be placed in another element. Note that the float property is only supported for tables and images.
text-transform [ uppercase | lowercase ] Select the transformation that will be performed on the text prior to displaying it.
font-kerning [ normal | none ] Enables or disables kerning between text characters.
font-variant small-caps Perform the smallcaps transformation on the text prior to displaying it.
word-spacing <width>px Specifies an alternate spacing between each word.
line-height <number>[% | px | pt | cm] Specifies the height of a line. It can be one of the following:
  • fixed line height in pixels, points, or centimeters.
  • a percentage of the current font size.

Qt 的特定 CSS 属性

Besides the standard CSS properties listed earlier, the following Qt-specific properties can also be used to style a text block:

特性 描述
-qt-block-indent <number> Indents the text block by the specified no. spaces.
-qt-list-indent <number> Indents the list items by the specified no. of spaces.
-qt-list-number-prefix <string> Prefixes the given string to list number in an HTML ordered list.
-qt-list-number-suffix <string> Suffixes the given string to list number in an HTML ordered list.
-qt-paragraph-type empty Hides the text block.
-qt-table-type root | frame root renders the text blocks inline without borders and indentation, whereas frame renders them on a new line with a frame around.
-qt-user-state <number> Adds it as user data for the text block.

支持的 CSS 选择器

All CSS 2.1 selector classes are supported except pseudo-class selectors such as :first-child , :visited and :hover .

常见的富文本编辑任务