使用HTML / CSS来限制句子的长度

Question

我从JSON文件中调用几句话并将其附加到<p>标记中。

    <p>
       Thank you all for another magical night spent together 
       this last sunday at The Hippodrome in Baltimore.Thank yo...
    <p>

我想缩短它，即使它在json中已经缩短了，我能用纯css或html限制它的长度吗？

我不需要任何javascript / Jquery建议，因为如果来到javascirpt它很容易完成这项任务，我可能只是玩dom，但在这种情况下我想知道是否有任何纯粹的html和css方法可以做到这一点。

更新1： 每个人都建议我使用white-space: nowrap将句子转换为一行，然后通过设置text-overflow:ellipsis将隐藏文本转换为隐藏文本，但这是一个限制，html只能显示单行。无论如何还有显示另一条线？

Answer 1

CSS和HTML无法获得句子的长度。所以，我们没有限制CSS和HTML无法获得句子的长度。所以，不能设置句子的限制长度。但是如果你想用CSS来截断一行的max-width of element。你可以这样做：

p {
 max-width: 100px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

Answer 2

您也可以使用链接https://developer.mozilla.org/en/docs/Web/CSS/text-overflow

import sys, os, random

class player():
    def __init__(self,name):
        self.name=name
        self.level=1
        self.sword="Laser Sword"
        self.armour="Titanium Armour"
        self.maxhealth=100
        self.health=self.maxhealth
        self.gold=10
        self.pots=0
        self.attack=0
        if self.sword=="Wooden Sword":
            self.attack=10
        elif self.sword=="Tin Greatsword":
            self.attack=15
        elif self.sword=="Iron Greatsword":
            self.attack=20
        elif self.sword=="Ice Sword":
            self.attack=30
        elif self.sword=="Earth Sword":
            self.attack=35
        elif self.sword=="Fire Sword":
            self.attack=40
        elif self.sword=="Laser Sword":
            self.attack=50
        else:
            self.attack=0

class goblin():
    def __init__(self,name):
        self.name=name
        self.maxhealth=50
        self.health=self.maxhealth
        self.attack=5
        self.goldgain=10
goblinIG=goblin("Goblin")

class zombie():
    def __init__(self,name):
        self.name=name
        self.maxhealth=70
        self.health=self.maxhealth
        self.attack=7
        self.goldgain=15
zombieIG=zombie("Zombie")

class skeleton():
    def __init__(self,name):
        self.name=name
        self.maxhealth=90
        self.health=self.maxhealth
        self.attack=8
        self.goldgain=20
skeletonIG=skeleton("Skeleton")

def main():
    os.system('clear')
    print "Welcome to Inspire!"
    print "1.) Start"
    print "2.) Tutorial"
    print "3.) Load"
    print "4.) Exit"
    option=raw_input("-->")
    if option=="1":
        start()
    elif option=="2":
        tutorial()
    elif option=="3":
        pass
    elif option=="4":
        sys.exit()
    else:
        main()

def tutorial():
    print "Welcome to Inspire, the text-based RPG game."
    print "Inspire is a game about the hero (you) going on an adventure and fighting monsters."
    print "When go and fight you are meeted with a info screen."
    print "Player    vs    Enemy"
    print "All the stats"
    print "You know have a option to Attack, Drink a potion(that's if you have any), or to run away."
    print "Note that it isn't guaranteed that you will get away."
    print "If you attack you will deal damage to the enemy,"
    print "Press enter to see what the enemy does,"
    print "After this it will go back to the info screen for the fight,"
    print "Once again you have the three choices."
    print ""
    print "If decide not to fight then you can go to the store."
    print "In the store you can buy new weapons, armour and potions from the gold you get when you will an enemy."
    print "That is all you need to know."
    print "Have fun playing, Inspire"
    print ""
    print "Press enter to go back to the main menu."
    option=raw_input("")
    main()


def start():
    os.system('clear')
    print "Hello! What is your name?"
    option=raw_input("-->")
    global playerIG
    playerIG=player(option)
    start1()

def start1():
    os.system('clear')
    print "Player Stats:"
    print "Name: %s" % playerIG.name.title()
    print "Level: %s" % playerIG.level
    print "Health: %i/%i" % (playerIG.health,playerIG.maxhealth)
    print "Sword: %s" % playerIG.sword
    print "Armour: %s" % playerIG.armour
    print "Average Damage: %i" % playerIG.attack
    print "Gold: %i" % playerIG.gold
    print "1.) Fight"
    print "2.) Store"
    print "3.) Save"
    print "4.) Exit"
    option=raw_input("-->")
    if option=="1":
        preFight()
    elif option=="2":
        store()
    elif option=="3":
        pass
    elif option=="4":
        sys.exit()
    else:
        start1()

def preFight():
    global enemy
    enemynum=random.randint(1,3)
    if enemynum==1:
        enemy=goblinIG
    elif enemynum==2:
        enemy=zombieIG
    elif enemynum==3:
        enemy=skeletonIG
    fight()

def fight():
    print "%s    vs    %s" % (playerIG.name, enemy.name)
    print "%s's Health: %i/%i" % (playerIG.name.title(), playerIG.health, playerIG.maxhealth)
    print "%s's Health: %i/%i" % (enemy.name, enemy.health, enemy.maxhealth)
    print "Potions: %s" % (playerIG.pots)
    print "1.) Attack"
    print "2.) Drink Potion"
    print "3.) Run"
    option=raw_input("-->")
    if option=="1":
        attack()
    elif option=="2":
        drinkpot()
    elif option=="3":
        run()
    else:
        fight()

def attack():
    os.system('clear')
    pAttack=random.randint(playerIG.attack/2, playerIG.attack)
    eAttack=random.randint(enemy.attack/2, enemy.attack)
    if pAttack==playerIG.attack/2:
        print "You miss!"
    else:
        enemy.health-=pAttack
        print "You deal %s damage" % pAttack
    option=raw_input("")
    os.system('clear')
    if eAttack==enemy.attack/2:
        print "The enemy missed!"
    else:
        if playerIG.armour=="Iron Armour":
            playerIG.health-=eAttack/1.5
            print "The enemy deals %s damage" % eAttack
        elif playerIG.armour=="Heavy Iron Armour":
            playerIG.health-=eAttack/2.5
            print "The enemy deals %s damage" % eAttack
        elif playerIG.armour=="Titanium Armour":
            playerIG.health-=eAttack/3
            print "The enemy deals %s damage" % eAttack
    option=raw_input("")
    if enemy.health<=0:
        win()
    if playerIG.health<=0:
        die()
    else:
        fight()

def drinkpot():
    os.system('clear')
    if playerIG.pots==0:
        print "You don't have any potions!"
        option=raw_input("")
        fight()
    else:
        playerIG.health+=50
        if playerIG.health>playerIG.maxhealth:
            playerIG.health=playerIG.maxhealth
        print "You drank a potion"
    option=raw_input("")
    fight()

def run():
    pAttack=random.randint(playerIG.attack/2, playerIG.attack)
    eAttack=random.randint(enemy.attack/2, enemy.attack)
    os.system('clear')
    runnum=random.randint(1,3)
    if runnum==1:
        print "You successfully ran away!"
        option=raw_input("")
        start1()
    else:
        print "You failed to get away!"
        option=raw_input("")
        os.system('clear')
        if eAttack==enemy.attack/2:
            print "The enemy missed!"
        else:
            playerIG.health-=eAttack
            print "The enemy deals %s damage" % eAttack
    option=raw_input("")
    if playerIG.health<=0:
        die()
    else:
        fight()

def win():
    print "You have successfully killed the %s!" % enemy.name
    print "You have gained %s gold!" % enemy.goldgain
    playerIG.gold+=enemy.goldgain
    option=raw_input("")
    start1()

def die():
    print "You have died whilst trying to defeat %s" % enemy.name
    print "1.) Try again"
    print "2.) Quit"
    option=raw_input("-->")
    if option=="1":
        start()
    elif option=="2":
        sys.exit()
    else:
        die()

Answer 3

使用此示例：

[link][1]

Answer 4

您需要使用CSS截断文本，并且通过它的外观，您需要在末尾正确截断的多行文本框（Anubhav的答案是单行特定的）。因为没有pure-css选项存在（我知道）来处理这个问题，所以你可能需要一个jQuery插件，比如clamp.js或者类似的。

你可能想要的答案来自另一个SO线程，这里： https://stackoverflow.com/a/33061059/5580153

编辑：这里还有一个相当复杂的CSS解决方案：http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/虽然我觉得这是一个被黑客入侵的解决方案。

Answer 5

您可以使用text-overflow: ellipsis;代替。请阅读以下示例。

<div id="readmore">Thank you all for another magical night spent together 
       this last sunday at The Hippodrome in Baltimore.
</div>

<强> CSS

#readmore {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000;
}

有关详细信息，请参阅此reference

Answer 6

如果您是单行，请使用text-overflow:ellipsis属性来实现单行文本以显示省略号（溢出…）。当然，有些浏览器还需要添加width属性。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如果是多行，请使用WebKit CSS扩展属性（WebKit是私有属性）-webkit-line-clamp;。注意：WebKit浏览器或移动终端（大多数是基于WebKit的浏览器）页面都很容易实现：这是一个非标准属性（不支持的WebKit属性），它没有出现在CSS规范的草案中。 -webkit-line-clamp用于限制块元素显示的文本中的行数。为了实现这种效果，需要将其与其他WebKit属性结合使用。 常见的绑定属性：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;